ybxf-security-uniapp/pagesB/fire/check_record/picture/picture.vue

<template>
	<view class="container  uni-container" v-if="Object.keys(tableData).length != 0">
		<!-- 	<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">{{tableData.inspectInfo.orgId}}</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"
								v-if="tableData.receiverInfo!=null">{{tableData.receiverInfo.empRyxm}}</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"
								v-if="tableData.senderInfo!=null">{{tableData.senderInfo.empRyxm}}</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">{{taskleiXing}}</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" v-if="tableData.inspectInfo">{{tableData.inspectInfo.createTime}}</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" v-if="tableData.taskInfo.attId!=null">
						<uni-col :span="10">
							<text class="text-df text-1cut middles">附件</text>
						</uni-col>
						<uni-col :span="14">
							<text style="color:#00a3f4;" @click.native="down(tableData.taskInfo.attId)">点击预览文件</text>
						</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" style="margin-bottom: 40rpx;">

				<view v-if="tableData.fpdInfoList.length==0">
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text class="text-df text-1cut middles" style="font-weight: 600;color:#274647;">检查项目</text>
						</uni-col>
						<uni-col :span="14">
							<text class="text-descibe"
								style="font-weight: 600;color:#274647;">{{tableData.inspectInfo.inspName}}</text>
						</uni-col>
					</uni-row>
					<uni-row class="demo-uni-row">
						<uni-col :span="10">
							<text
								class="text-df text-1cut middles">{{tableData.inspectInfo.isdenger==1?'检查隐患描述':'检查描述'}}</text>
						</uni-col>
						<uni-col :span="14">
							<text
								class="text-descibe">{{tableData.inspectInfo.isdenger==1?tableData.inspectInfo.description:'正常'}}</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 tableData.hisResult" :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">
						<view v-for="(items,indexs) in tableData.imgList">
							<image v-if="items.imgUrl" :key="indexs" :src="items.imgUrl" class="image-size" @click="viewImageBig(items.imgUrl)"></image>
						</view>

					</uni-row>
				</view>
				<view v-if="tableData.fpdInfoList.length>0">
					<view v-for="(item,index) in tableData.fpdInfoList">
						<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.fpd_name}}</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;">{{`(${index+1})`}}设备名称</text>
							</uni-col>
							<uni-col :span="14">
								<text class="text-descibe" style="color:#274647;">{{item.fpd_code}}</text>
							</uni-col>
						</uni-row>
						<view>
							<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 item.hisFpdResult" :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">
								<uni-col :span="10">
									<text class="text-df text-1cut middles">{{item.fpd_type==1?'检查隐患描述':'检查描述'}}</text>
								</uni-col>
								<uni-col :span="14">
									<text class="text-descibe">{{item.isdanger==1?item.danger_describe:'正常'}}</text>
								</uni-col>
							</uni-row>

							<uni-row class="demo-uni-row tupian-flex">
								<image v-if="item.img_url1" :src="item.img_url1" class="image-size"  @click="viewImageBig(item.imgUrl)"></image>
								<image v-if="item.img_url2" :src="item.img_url2" class="image-size"  @click="viewImageBig(item.imgUrl)"></image>
								<image v-if="item.img_url3" :src="item.img_url3" class="image-size"  @click="viewImageBig(item.imgUrl)"></image>
							</uni-row>
						</view>
					</view>
				</view>
			</view>
			<!-- </view> -->


		</view>
	</view>
</template>
<script>
	let that = null;
	import {
		getInspEcthisDetail,
	} from '@/api/check_record';
	import {
		getInsHisImgurl,
	} from '@/api/check_record';
	import {
		checkType,
		downSee
	} from '@/utils/common'
	import {
		shijianc
	} from '@/utils/common.js'
	import { DICT_TYPE, getDictDatas } from '@/utils/dict';
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				tableData: {},
				// 数据加载中
				loading: false,
				dictTypeData: 'dict_inspect_type',
				dictTypeValue: '',
				moren: `${baseUrlImg}/checkActive/moren.png`, //默认图片
				zhengchang: `${baseUrlImg}/checkActive/zhengchang.png`,
				my: '',
				taskleiXingArr:getDictDatas(DICT_TYPE.TASK_TYPE),
				taskleiXing:""
			};
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad(options) {
			if (options.items) {
				this.my = JSON.parse(options.items)
			} else {
				var data = options.id;
				this.getData(data)
			}

		},
		methods: {
			viewImageBig(i) {
				let imgList=[]
				imgList.push(i)
				uni.previewImage({
					urls: imgList,
					current: i
				});
			},
			down(val){
				downSee(val)
			},
			getData(id) {
				// uni.redirectTo({
				// 	url: `/pagesA/fire/check_record/index?my=${this.my}`
				// });
				this.loading = true
				getInspEcthisDetail({
					hisId: id
				}).then(response => {
					this.loading = false;
					// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接 
					this.tableData = response.data ? response.data : {},
					this.taskleiXingArr.map(i=>{	
						if(i.value=this.tableData.taskInfo.taskType){
							this.taskleiXing=i.label
						}
						
					})
					this.tableData.inspectInfo.createTime=shijianc(this.tableData.inspectInfo.createTime)
					// this.dictTypeValue = this.tableData.inspType
					// this.tableData.inspType = checkType(this.dictTypeData, this.dictTypeValue)
					// this.times = this.tableData.taskInfo ? shijianc(this.tableData.taskInfo.publishTime) : ''
				});
				getInsHisImgurl({
					hisId: id,
				}).then(response => {
					this.tableData.url = response.data
				});
			},
			// get() {
			// 	const data = uni.getStorageSync('getlistSimpleDict_key')
			// 	const e = data.map(v =>{
			// 		if (this.dictTypeValue == v.value && this.dictTypeData == v.dictType) {
			// 		    console.log(v.lable,'sdddddddd')
			// 		}
			// 	}

			// 	)

			// },
			// =================数据转换==================
			statusListTran(val) { //status状态转换
				// return this.statusList[val]
			},
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		// border-radius: 30px 30px 0px 0px;
		// background: #fff;
		// margin-top: 90rpx;
		// z-index: 9999;
		// position: relative;

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

	}
   page{
	   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;
	}
</style>