ybxf-security-uniapp/pagesA/fire/notice/inform_details/inform_details.vue

<!-- 消防巡检去完成2.28的代码信息 -->
<template>
	<view>
		<view>
			<u-list @scrolltolower="scrolltolower" v-if="tableData.length!=0">
				<u-list-item @click="goDetail" v-for="(item, index) in tableData" :key="index">
					<view>
						<!-- <uni-card > -->
						<view class="titles">{{item.insp_name}}</view>
						<uni-grid :column="4" :showBorder="false">
							<uni-grid-item>
								<view class="grid-item-box">
									<image :src="item.isdenger==0?zhengchang:moren" class="tupian"
										@click="normal(item)">
									</image>
									<text class="text">正常</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<image :src="item.isdenger==1?danger:moren" class="tupian" @click="yinHuan(item)">
									</image>
									<text class="text">存在隐患</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box">
									<image :src="scan" class="tupian" @click="erWeiMa"></image>
									<text class="text">扫二维码</text>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="grid-item-box" @click="photoUpload(item.id)">
									<image :src="photograph" class="tupian"></image>
									<text class="text">拍照上传</text>
								</view>
							</uni-grid-item>

						</uni-grid>
						<!-- 线 -->
						<!-- <view style="width: 80%;height: 2rpx;background-color: #f8f8f8;margin-left: 10%;"></view> -->
						<view class="uni-grid-wraps">
							<view style="position: relative;width: 180rpx;float: left;margin: 40rpx 15rpx 0 0rpx;"
								v-for="(items,indexs) in item.attUrl" :key="indexs">
								<image :src="items"
									style="width: 160rpx;height: 160rpx;border-radius: 30rpx;float: left;">
									<u-icon name="close" color="#4CB2B6" size="19" @click="closeImage(indexs,index)">
									</u-icon>
							</view>

							<!-- </uni-card> -->
						</view>
					</view>
				</u-list-item>

			</u-list>

		</view>
		<view style="width: 60%;position: absolute;left:150rpx;;bottom:60rpx;z-index: 9999;">
			<div class="btnList" v-if="tableData.length!=0">
				<u-button shape="circle" type="primary" color="#4CB2B6" text="批量保存" customStyle="margin-right:20%"
					@click="checkImplementConfirm">
				</u-button>
				<u-button shape="circle" type="primary" color="#4CB2B6" text="提交发布" @click="checkImplementRelease">
				</u-button>
			</div>
		</view>
		<view style="text-align: center;" v-if="tableData.length==0">
			<view class="text-gray" style="padding-top: 20px;font-size: 40rpx;"> 暂无任务 </view>
		</view>
		<u-modal :show="show" :title="title" :content='content' @confirm="show = false"></u-modal>
		<u-modal :show="show2" title="隐患描述" @confirm="descript" @cancel="show2 = false">
			<view class="slot-content">
				<textarea v-model="description" placeholder="请输入描述内容" />
			</view>
		</u-modal>

	</view>
</template>

<script>
	let that = null
	import {
		CheckActiveImplement, //每日巡查扫码界面
		saveCheckImplement, //保存检查项
		checkSubmitRelease //提交发布检查下
	} from "@/api/check_active";
	// import danger from '@/static/images/checkActive/danger.png'
	import {
		getAccessToken
	} from '@/utils/auth'
	import config from '@/config'
	import store from "@/store"
	import loadImage from 'blueimp-load-image';
	const baseUrl = config.baseUrl
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				// danger: danger, //有隐患图片
				moren: `${baseUrlImg}/checkActive/moren.png`, //默认图片
				zhengchang: `${baseUrlImg}/checkActive/zhengchang.png`,
				photograph: `${baseUrlImg}/checkActive/photograph.png`,
				scan: `${baseUrlImg}/checkActive/scan.png`,
				tableData: [],
				// 每页数据量
				// 当前页
				// 数据总量
				total: 0,
				loading: false,
				formData: {
					id: 0,
					pageNo: 1,
					pageSize: 10,
					status: 0,
					taskStatus: 1,
					broadId: 0,
				},

				saveImplement: {
					inspectList: [],
					inspectTime: "", //传的当前事件
					orgId: 0,
					taskId: 0, //待完成列表所点击的id
					broadId: 0,

				},
				isZhengChang: false, //是否正常
				isYinHuan: false, //是否隐患
				show: false, //未巡查提示框
				show2: false, //隐患描述提示框
				title: '注意',
				content: '巡查未完成',
				contents: '',
				description: '', //隐患描述内容
				id: '',
				FinalTime: '',
				options: ''

			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			that = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('acceptDataFromOpenerPage', function(val) {
				// that.formData = val
				console.log(val, 'valval');
				if (val.taskInfo) {
					that.options = val.taskInfo
				} else {
					that.options = val
				}

				that.formData.id = parseInt(that.options.id)
				that.contents = that.options.taskContent
				that.formData.broadId = parseInt(option.broadId)
				that.saveImplement.broadId = parseInt(option.broadId)
				that.tableData = []
				that.getData(that.formData.pageNo)
			})

		},
		methods: {
			descript() { //隐患描述点击确认
				this.show2 = false
				console.log(this.tableData, this.id, 'this.tableDataafafa');
				this.tableData.map(i => {
					if (this.id == i.id) {
						i.description = this.description
					}
				})

			},
			closeImage(val, k) { //删除图片
				this.tableData[k].attUrl.splice(val, 1)
				that.$forceUpdate();
			},
			goDetail() { //去详情
				uni.navigateTo({
					url: '/pagesA/fire/check_active/check_implement_detail/check_implement_detail',

				})
			},
			checkImplementConfirm() { //确认保存检查项  
				this.shuJu()
				this.tableData.map(i => {
					if (i.isdenger == undefined) {
						this.show = true
					}
				}) //判断是否完成巡查
				//批量保存
				// console.log(this.show,'Confirmthis.show');
				if (!this.show) {
					saveCheckImplement(JSON.stringify(this.saveImplement)).then(response => {
						if (response.data) {
							uni.showToast({
								title: '保存成功',
								icon: 'none',
								duration: 2000
							})
							uni.navigateBack()

						} else {
							this.$modal.msgError('保存失败')
						}
					});
				}
			},
			checkImplementRelease() { //提交发布
				this.shuJu()
				this.tableData.map(i => {
					if (i.isdenger == undefined) {
						this.show = true
					}
				}) //判断是否完成巡查
				if (!this.show) {
					checkSubmitRelease(JSON.stringify(this.saveImplement)).then(response => {
						if (response.data) {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 2000
							})
							setTimeout(() => {
								uni.redirectTo({
									url: `/pagesA/fire/check_active/index?current=1`
								});
							}, 1000)

						} else {
							this.$modal.msgError('提交失败')
						}
					})
				}
			},
			shuJu() {
				// let inspectList = []
				// this.tableData.map(i => {
				// 	inspectList.push({
				// 		inspCode: i.insp_code
				// 	})
				// })
				// console.log('inspectList', inspectList);
				// this.saveImplement.inspectList = inspectList
				this.saveImplement.inspectList = this.tableData
				this.saveImplement.orgId = this.$store.state.user.orgId
				this.saveImplement.taskId = this.formData.id
				console.log(this.saveImplement, 'this.saveImplementthis.saveImplement');
			},
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true
				this.formData.pageNo = pageNo
				CheckActiveImplement(JSON.stringify(this.formData)).then(response => {
					this.total = response.data.total;
					this.loading = false;
					this.tableData = response.data
					this.tableData.map(i => {
						i.inspId = i.id,
							i.inspName = i.insp_name,
							i.inspCode = i.insp_code,
							i.isdenger = i.isdenger,
							i.isreport = 0,
							i.status = 0,
							i.attUrl = []

					})
					// console.log(this.tableData, 'this.tableData');

				});
			},
			// 触底的事件
			scrolltolower() {
				// 判断是否还有下一页数据
				if (this.formData.pageNo * this.formData.pageSize >= this.total) return uni.showToast({
					title: `数据加载完毕`
				})
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return
				this.formData.pageNo += 1
			},
			//点击了隐患的勾选
			normal(val) {
				this.id = val.id
				this.tableData.map(i => {
					if (i.id == val.id) {
						i.isdenger = 0
					}
				})
				this.$forceUpdate();
				this.tableData.map(i => {
					if (this.id == i.id) {
						i.inspContent = this.contents
					}

				})
				console.log(this.tableData, 'this.tableData-----------');
			},
			//点击隐患
			yinHuan(val) {
				this.description = ''
				this.id = val.id
				this.tableData.map(i => {
					if (i.id == val.id) {
						i.isdenger = 1
						this.description = i.description ? i.description : ''
						i.description = this.description
					}
				})
				this.$forceUpdate();
				this.show2 = true

			},
			//扫码
			erWeiMa() {
				// 只允许从相机扫码
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：**' + res.result);
					}
				})
			},
			//拍照上传
			photoUpload(val) {
				let pictures = [];
				let that = this;
				uni.chooseImage({
					sourceType: ['camera'], //实现拍照
					count: 3,
					sourceType: ['album'], //打开系统相册
					success(res) {
						if (Array.isArray(res.tempFilePaths)) { //从相册选择有三张的情况
							// if (res.tempFilePaths.length === 3) {
							// 	pictures.length = 0
							// } else if (res.tempFilePaths.length == 2 && pictures.length == 2) {
							// 	pictures.splice(0, 1)
							// }
							res.tempFilePaths.forEach(item => {
								loadImage(
									item,
									function(canvas) {
										canvas.toBlob(function(blob) {
											// 压缩后的 Blob 对象
											const compressedFile = blob;
											// 将压缩后的文件 `compressedFile` 转换为临时URL
											const fileUrl = URL.createObjectURL(
												compressedFile);
											// let picture = {
											// 	url: item,
											// 	show: false
											// }
											// pictures.push(picture)
											uni.uploadFile({
												url: baseUrl +
													'/admin-api/infra/file/upload', //后端用于处理图片并返回图片地址的接口    
												filePath: item,
												name: 'file',
												header: {
													"Authorization": 'Bearer ' +
														getAccessToken(),
												}, //请求token
												success: (res) => {
													let imgUrl = JSON.parse(res
														.data)
													// that.imageList.push(imgUrl.data)
													that.tableData.map((i,
														index) => {
															if (val == i.id) {
																i.attUrl.push(
																	imgUrl
																	.data)
															}
														})
													console.log(that.tableData,
														'this.imageList');
													that.$forceUpdate();
													// // 返回的url

												},
												fail: () => {
													console.log("err");
												}
											})
											// // 保存到本地
											// uni.saveImageToPhotosAlbum({
											// 	filePath: item,
											// })
											URL.revokeObjectURL(fileUrl);
										}, 'image/jpeg', 0.6); // 设置压缩后的图片格式为 JPEG，压缩质量为 0.6
									}, {
										canvas: true,
										maxWidth: 800
									} // 设置最大宽度为 800px
								);
							})
						}
					}
				})
			},
			// // 将拍的照片的base64转成文件格式然后再转成FormData，就可以使用上传图片的接口了
			// base64ToFile(base64){
			// 	const dataArr = base64.split(',');
			// 	const byteString = atob(dataArr[1]);
			// 	const options = {
			// 		type:'image/jpeg',
			// 		endings:'native'
			// 	};
			// 	const u8Arr = new Uint8Array(byteString.length)
			// 	for(let i=0;i<byteString.length;i++){
			// 		u8Arr[i]=byteString.charCodeAt(i);
			// 	}
			// 	return new File([u8Arr],'phone.png',options)
			// },

			//methode结束
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(245, 247, 249) !important;
	}

	.container {
		// height: 100vh;
		position: relative;
		background-color: rgb(245, 247, 249);
	}

	/deep/.uni-card {
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
		border-radius: 20rpx;
	}

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

	.text {
		text-align: center;
		color: #000;
		font-size: 26rpx;
		margin-top: 20rpx;
	}

	.titles {
		padding: 20rpx 0;
		color: #383838;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	/deep/ .uni-grid-item {
		height: 140rpx !important;
	}

	/deep/.uni-textarea-textarea {
		border: 1px solid #4CB2B6;
	}

	.btnList {
		display: flex
	}

	/deep/.u-icon--right[data-v-172979f2],
	/deep/.u-icon--right.data-v-172979f2,
	/deep/.u-icon--right {
		background-color: #f8f8f8;
		border-radius: 5rpx;
		position: absolute;
		top: -14rpx;
		right: 20rpx;
	}

	.uni-grid-wraps {
		margin-left: 60rpx;
	}
</style>