ybxf-security-uniapp/pagesA/fire/check_active/check_list/check_list.vue

<template>
	<view class="container  uni-container" v-if="tableData!=''">
		<!-- 	<navInfo :title="'每日巡查详情'"></navInfo>
		<view class="bgTopImg">
			<image slot="right" src="@/static/images/navBg@2x.png" class="bgTopImg"></image>
		</view> -->
		<view style="margin-bottom: 150rpx;" class="time-main main-time">
			<view>
				<view class="nav par-time " style="color:#4CB2B6;">
					<view class="time-axis">
						主要信息
					</view>
				</view>
				<view class="main">
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">任务名称</text>
						</uni-col>
						<uni-col :span="14">
							<text class="text-descibe">{{tableData.taskInfo.taskName}}</text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">接受者</text>
						</uni-col>
						<uni-col :span="14">
							<text class="text-descibe">{{receiver}}</text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">发布者</text>
						</uni-col>
						<uni-col :span="14">
							<text class="text-descibe">{{sender}}</text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">任务状态</text>
						</uni-col>
						<uni-col :span="14">
							<text v-if="tableData.taskInfo.taskStatus==1"
								class="text-descibe weiwan zhuangtai">未完成</text>
							<text class="text-descibe shenhe zhuangtai"
								v-else-if="tableData.taskInfo.taskStatus==2">待审核</text>
							<text class="text-descibe yiwan zhuangtai"
								v-else-if="tableData.taskInfo.taskStatus==3">已完成</text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">发布日期</text>
						</uni-col>
						<uni-col :span="14">
							<text class="text-descibe" style="padding-top: 20rpx;">{{times}}</text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">任务类型</text>
						</uni-col>
						<uni-col :span="14">
							<text class="text-descibe">{{tableData.taskInfo.taskType}}</text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">任务说明</text>
						</uni-col>
						<uni-col :span="14">
							<rich-text :nodes="tableData.taskInfo.taskContent"></rich-text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row" v-if="tableData.taskInfo.attId">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">附件</text>
						</uni-col>
						<uni-col :span="14">
							<!-- #ifdef MP-WEIXIN -->
							<text style="color:#00a3f4;cursor: pointer;"
								@click.native="down(tableData.taskInfo.attId)">点击预览文件</text>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<a style="color:#00a3f4;cursor: pointer;" @click="down(tableData.taskInfo.attId)">点击预览文件</a>
							<!-- #endif -->
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view v-if="tableData.inspectInfo.length!=0" style="margin-top: 30rpx;">
				<view class="nav par-time" style="color:#4CB2B6;">
					<view class="time-axis">处理详情</view>
				</view>
				<view class="main" v-for="(item,index) in tableData.inspectInfo" :key="index"
					style="margin-bottom: 40rpx;">
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles"
								style="font-weight: 600;color:#274647;">检查项目{{index+1}}</text>
						</uni-col>
						<uni-col :span="14">
							<text class="text-descibe" style="font-weight: 600;color:#274647;">{{item.inspName}}</text>
						</uni-col>
					</uni-row>
					<view v-if="item.inspType!='fpd'">
						<uni-row class="demo-uni-row">
							<uni-col :span="10">
								<text class="text-df text-1cut middles">{{item.isdenger==1?'检查隐患描述':'检查描述'}}</text>
							</uni-col>
							<uni-col :span="14">
								<text class="text-descibe">{{item.isdenger==1?item.description:'正常'}}</text>
							</uni-col>
						</uni-row>
						<uni-row class="demo-uni-row tupian-flex">
							<view v-for="(items,indexs) in item.inspectHisSubDOList">
								<image v-if="items.imgUrl" :key="indexs" :src="items.imgUrl" class="image-size"
									@click="viewImageBig(items.imgUrl)"></image>
							</view>

						</uni-row>
					</view>
					<view v-else>
						<view v-for="(items,indexs) in item.inspectHisFpdMutliDOList" :key="indexs">
							<uni-row class="demo-uni-row">
								<uni-col :span="10">
									<text class="text-df text-1cut middles"
										style="color:#274647;font-weight: 500;">{{`(${indexs+1})`}}设备名称</text>
								</uni-col>
								<uni-col :span="14">
									<text class="text-descibe" style="color:#274647;">{{items.fpdName}}</text>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="10">
									<text class="text-df text-1cut middles"
										style="color:#274647;font-weight: 500;">设备编号</text>
								</uni-col>
								<uni-col :span="14">
									<text class="text-descibe" style="color:#274647;">{{items.fpdCode}}</text>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="10">
									<text class="text-df text-1cut middles">{{item.isdenger==1?'检查隐患描述':'检查描述'}}</text>
								</uni-col>
								<uni-col :span="14">
									<text class="text-descibe">{{item.isdenger==1?items.dangerDescribe:'正常'}}</text>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row">
								<uni-col :span="10">
									<text class="text-df text-1cut middles">检查结果</text>
								</uni-col>
								<uni-col :span="14" style="display: flex;flex-wrap: wrap;">
									<view v-for="(items2,indexs2) in items.fpdResultDOList" :key="indexs2"
										style="margin-right: 10rpx;">
										<image v-if="items2.resValue==1" :src="zhengchang" class="tupian"
											style="vertical-align:middle;margin-right: 6rpx;" />
										<text v-if="items2.resValue==1" class="text-descibe">{{items2.resLable}}</text>
									</view>
								</uni-col>
							</uni-row>
							<uni-row class="demo-uni-row tupian-flex">
								<image v-if="items.imgUrl1!=null" :src="items.imgUrl1" class="image-size"
									@click="viewImageBig(items.imgUrl)"></image>
								<image v-if="items.imgUrl2!=null" :src="items.imgUrl2" class="image-size"
									@click="viewImageBig(items.imgUrl)"></image>
								<image v-if="items.imgUr3!=null" :src="items.imgUrl3" class="image-size"
									@click="viewImageBig(items.imgUrl)"></image>
							</uni-row>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 80%;position: fixed;bottom:80rpx;left: 50%;transform: translate(-50%);">
			<u-button v-if="current==0&&history==''" style="width: 70%;" @click="addClickModify(tableData)"
				type="primary" color="#4CB2B6" shape="circle" size="default" text="去完成">
			</u-button>
			</u-button>
			<u-button v-if="current!=0" style="width: 70%;" @click="fanHui" type="primary" color="#4CB2B6"
				shape="circle" size="default" text="返回">
			</u-button>
		</view>
	</view>
</template>
<script>
	let that = null;
	import {
		getCheckActiveTask, //主动检查除归档外的查看详情--新
		getempnamebyuserid //根据人员id获取人员姓名
	} from "@/api/check_active";
	import {
		shijianc,
		downSee
	} from '@/utils/common.js'
	import {
		DICT_TYPE,
		getDictDatas
	} from "@/utils/dict";
	//任务状态，0代表未执行刚建好，可修改，1表示已执行不能改
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				taskTypeDict: getDictDatas(DICT_TYPE.TASK_TYPE),
				urls: baseUrlImg,
				moren: `${baseUrlImg}/checkActive/moren.png`, //默认图片
				zhengchang: `${baseUrlImg}/checkActive/zhengchang.png`,
				current: 0,
				broaId: 0,
				tableData: [],
				times: '',
				sender: '',
				receiver: '',
				jieTimes: '',
				attId: ['https://img0.baidu.com/it/u=55142048,1961882233&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500',
					'https://img0.baidu.com/it/u=55142048,1961882233&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500',
					'https://img0.baidu.com/it/u=55142048,1961882233&fm=253&fmt=auto&app=138&f=JPEG?w=707&h=500',
					'https://www.anhuanjia.com/upload/resources/image/2021/10/21/11255.jpg',
					'https://img0.baidu.com/it/u=1094909399,1438583889&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677258000&t=d2ab3fbac6d995537e6e152a1078a4fb',
					'https://img0.baidu.com/it/u=2492383633,364894362&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=451'
				],
				history: ''
			}
		},
		onLoad(options) {
			this.history = options.history ? options.history : ''
			this.current = options.current ? options.current : ''
			that = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(val) {
				that.broaId = val
				that.getData()
			})

		},

		methods: {
			viewImageBig(item) {
				let imgList = []
				imgList.push(item)
				uni.previewImage({
					urls: imgList,
					current: item
				});
			},
			// 下载附件
			down(appendix) {
				downSee(appendix)
				// const fileExt = appendix.substring(appendix.lastIndexOf('.') + 1);
				// console.log(fileExt, 'fileExtfileExt');
				// var that = this;
				// //加载框动画
				// uni.showLoading({
				// 	title: '正在下载……'
				// });
				// // #ifdef H5
				// let link = document.createElement('a');
				// link.href = appendix;
				// link.download = '';
				// document.body.appendChild(link);
				// link.click();
				// link.remove();
				// uni.hideLoading();
				// uni.showToast({
				// 	icon: 'success',
				// 	mask: true,
				// 	title: '文件已下载',
				// 	duration: 2000
				// });

				// // #endif
				// // #ifdef MP-WEIXIN
				// uni.downloadFile({
				// 	url: appendix, //下载地址接口返回
				// 	success: data => {
				// 		// console.log('打印data', data);
				// 		if (data.statusCode === 200) {
				// 			//隐藏加载框
				// 			// uni.hideLoading();
				// 			//文件保存到本地
				// 			uni.getFileSystemManager().saveFile({
				// 				tempFilePath: data.tempFilePath, //临时路径
				// 				success: function(res) {
				// 					// console.log('打印res', res);
				// 					uni.showToast({
				// 						icon: 'success',
				// 						mask: true,
				// 						title: '文件已保存：' + res.savedFilePath, //保存路径
				// 						title: '加载成功',
				// 						duration: 2000
				// 					});
				// 					//自动打开文档查看
				// 					setTimeout(() => {
				// 						var filePath = res.savedFilePath;
				// 						console.log(res, 'filePathfilePath');
				// 						uni.openDocument({
				// 							//新开页面打开文档，支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
				// 							filePath: filePath,
				// 							fileType: fileExt,
				// 							showMenu: false,
				// 							success: function(res) {
				// 								console.log('打开文档成功');
				// 							},
				// 							fail: function() {
				// 								uni.showToast({
				// 									title: '暂不支持打开此类型',
				// 									duration: 2000,
				// 									icon: 'none'
				// 								});
				// 							}
				// 						});
				// 					}, 2000);
				// 				}
				// 			});
				// 		}
				// 	},
				// 	fail: err => {
				// 		console.log(err);
				// 		uni.showToast({
				// 			icon: 'none',
				// 			mask: true,
				// 			title: '文件下载失败'
				// 		});
				// 	}
				// }) // #endif
			},

			//返回
			fanHui() {
				uni.navigateBack()
			},
			//去完成
			addClickModify(val) {
				uni.navigateTo({
					url: `/pagesA/fire/check_active/check_implement/check_implement?id=${val}&broadId=${this.broaId}`,
					success: function(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					},
				})
			},
			goAddCheck(val) {
				uni.navigateTo({
					url: `/pagesA/fire/check_active/add_check/add_check?id=` + val,

				})
			},
			// 获取数据
			getData() {
				getCheckActiveTask({
					broadId: this.broaId
				}).then(response => {
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
					this.tableData = response.data
					this.times = this.tableData.taskInfo ? shijianc(this.tableData.taskInfo.publishTime) : ''
					getempnamebyuserid({
						userId: this.tableData.taskInfo.receiver
					}).then(res => {
						this.receiver = res.data
					})
					getempnamebyuserid({
						userId: this.tableData.taskInfo.sender
					}).then(res => {
						this.sender = res.data
					})
					this.taskTypeDict.map(i => {
						if (i.value == this.tableData?.taskInfo?.taskType) {
							this.tableData.taskInfo.taskType = i.label
						}
					})
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #f5f7f9;
	}

	body {
		background-color: #f5f7f9;
	}

	.container {
		// border-radius: 30px 30px 0px 0px;
		// background: #fff;
		// margin-top: 90rpx;
		// z-index: 9999;
		// position: relative;
		background-color: #f5f7f9;

		.uni-container {
			padding-bottom: 120rpx;
			margin-top: 50rpx;
			height: 100%;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			background-color: #f5f7f9;
		}
	}

	.zhuangtai {
		padding: 5rpx 20rpx;
		border-radius: 2px;
	}

	.weiwan {
		color: #D51A52;
		background: rgba(213, 26, 82, 0.2);
		border: 1px solid #D51A52;
	}

	.yiwan {
		color: #4CB2B6;
		background: rgba(76, 178, 182, 0.2);
		border: 1px solid #4CB2B6;

	}

	.shenhe {
		color: #3491FA;
		background: rgba(52, 145, 250, 0.2);
		border: 1px solid #4CB2B6;
	}


	.juli-top {
		margin: 20rpx 0 20rpx 0;
	}

	.image-size {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		margin: 0 15rpx 20rpx 0;
	}

	.tupian {
		width: 38rpx;
		height: 38rpx;
	}

	.tupian-flex {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	//新样式
	.main {
		border: 4rpx solid rgb(192, 203, 218);
		border-radius: 10rpx;

		.demo-uni-row,
		/deep/.uni-row {
			width: 96%;
			margin: 0 2% !important;
			padding: 20rpx 0;
			border-bottom: 2rpx solid rgb(174, 174, 174);
		}

		/deep/.uni-row:last-child {
			border: 0;
		}

		.middles {
			text-align: center !important;
		}

		.buju {
			margin: 40rpx;
			line-height: 40rpx;

			.miaoshu {
				margin-right: 20rpx;
				color: #274647;
				font-size: 30rpx;
			}

			.text-descibe {
				color: rgb(102, 103, 133);
				font-size: 28rpx;
			}
		}
	}

	.nav {
		font-size: 36rpx;
		color: #4CB2B6;
		margin-bottom: 20rpx;
	}
	.main-time{
		list-style: none;
		position: relative;
	}
    .main-time::before{
		  content: "";
		      position: absolute;
			  border:rgba(52, 145, 250, 0.4) 2px dashed;
		      left: -43px;
		      height: calc(100% - 20px);
		      top: 20rpx;
	}
	.time-main {
		width: 70%;
		margin-left:15%;
	}

	.par-time {
		position: relative;
	}

	//时间轴
	.time-axis::before {
		content: "";
		position: absolute;
		width: 18rpx;
		height: 18rpx;
		border-radius: 9rpx;
		background: #21bfd0;
		top: 50%;
		transform: translateY(-50%);
		left: -46px;
	}
</style>