wurenji-xcx/pages/risk/riskDetail.vue

<template>
	<view class="main">
		<view class="title">
			基础信息
		</view>
		<view class="main_box">
			<view class="text">
				<view class="label">
					管线名称
				</view>
				<view class="value">
					{{dataForm.lineName}}
				</view>
			</view>
			<view class="text">
				<view class="label">
					管线单元名称
				</view>
				<view class="value">
					{{dataForm.lineUnitName}}
				</view>
			</view>
			<view class="text">
				<view class="label">
					风险类型
				</view>
				<view class="value">
					{{dataForm.riskCategory}}
				</view>
			</view>
			<view class="text">
				<view class="label">
					处理用户
				</view>
				<view class="value">
					{{dataForm.handleUserNames}}
				</view>
			</view>

			<view class="text">
				<view class="label">
					风险照片
				</view>
				<view class="value">
					<img @click="privew(dataForm.picUrl)" style="width: 400rpx;height: 300rpx;" :src="dataForm.picUrl"
						alt="" />
				</view>
			</view>
			<view class="text">
				<view class="label">
					风险点位置
				</view>
				<view class="value">
					<u-text class="success" type="primary" text="点击前往"
						@click="changelang(dataForm.photoLongitude,dataForm.photoLatitude)"></u-text>
				</view>
			</view>
		</view>
		<view class="title" v-if="dataForm.handleRiskDTO &&dataForm.handleRiskDTO.length>0">
			处理意见
		</view>
		<view class="main_box" v-if="dataForm.handleRiskDTO &&dataForm.handleRiskDTO.length>0">
			<view class="">
				<view class="value" v-for="item in dataForm.handleRiskDTO" :key="item.id">
					<div class="time">{{ item.createDate }}&nbsp;{{ item.createName }}</div>
					<div class="imgs">
						<img @click="privew(x.url)" v-for="(x, i) in item.fileList" :src="x.url" :key="x.id"
							style="width: 100%; height: 170rpx" />
					</div>
					<div class="remarks">
						{{ item.remarks ? item.remarks : "-" }}
					</div>
				</view>
			</view>

		</view>
		<view class="title">
			处理信息
		</view>
		<view class="main_box" v-if="dataForm.isHandle">
			<view class="text">
				<view class="label">
					图片
				</view>
				<view class="value">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>
				</view>
			</view>
			<view class="text">
				<view class="label">
					风险类型
				</view>
				<view class="value" @click='show=true'>
					<u--input placeholder="请选择" border="none" readonly v-model="dataForm.riskTypeName"></u--input>
				</view>
				<u-picker :show="show" :columns="selectData" keyName="dictLabel" @confirm='confirm'
					@cancel='show=false'></u-picker>
			</view>
			<view class="text">
				<view class="label">
					处理意见
				</view>
				<view class="value">
					<u--input placeholder="请输入内容" border="none" v-model="dataForm.remarks"></u--input>
				</view>
			</view>
		</view>
		<selectPeople ref="selectPeople" :checkof="true" v-model:value="dataForm.handleUserId"
			@selectPeople='selectPeople'>
		</selectPeople>
		<view class="" style="height:200rpx">

		</view>
		<view class="btns">
			<u-button class="success" v-if="dataForm.isHandle" type="primary" text="阶段填报"
				@click="completeTaskArrange(1)"></u-button>
			<u-button class="success" v-if="dataForm.isHandle" type="primary" text="处理完成"
				@click="completeTaskArrange(0)"></u-button>
		</view>
	</view>
</template>

<script>
	import selectPeople from '@/components/selectPeople/selectPeople.vue'
	import Config from '@/common/Config.js'
	export default {
		components: {
			selectPeople
		},
		data() {
			return {
				fileList1: [],
				selectData: [],
				show: false,
				dataForm: {
					handleUserName: "",
					remarks: "",
					riskTypeId: "1897947555707232258",
					riskTypeName: "正常施工",
					handleRiskDTO: {
						remarks: '',
						handleUserName: '',
					}
				}
			}
		},
		onLoad(x) {
			Object.assign(this.dataForm, JSON.parse(x.data));
			this.getInfo()
			this.getInit()
		},
		methods: {
			changelang(long, lat) {
				let that = this
				uni.request({
					url: `https://restapi.amap.com/v3/assistant/coordinate/convert?locations=${long},${lat}&coordsys=gps&key=74d5aa7c4270effe9a18d9cfa6149abf`,
					success(res) {
						let locations = res.data.locations.split(',')
						that.topicUrl(locations[0], locations[1])
					},
					fail(fail) {
						console.log(fail);
					}
				})
			},
			confirm(x) {
				this.dataForm.riskTypeId = x.value[0].id
				this.dataForm.riskTypeName = x.value[0].dictLabel
				this.show = false
			},

			topicUrl(photoLongitude, photoLatitude) {
				// 定义目的地的坐标和名称
				const latitude = photoLatitude; // 纬度
				const longitude = photoLongitude; // 经度
				const name = '风险点'; // 地点名称
				const address = '风险点'; // 地址

				// 调用uni.openLocation方法
				uni.openLocation({
					latitude: Number(latitude), // 目标纬度
					longitude: Number(longitude), // 目标经度
					name: name, // 地点名称
					// address: address, // 详细地址
					success: function() {
						console.log('成功打开地图');
					},
					fail: function(err) {
						console.error('打开地图失败', err);
					}
				});
			},
			privew(url) {
				wx.previewImage({
					urls: [url],
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList1.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.fileList1.length;
				lists.map((item) => {
					this.fileList1.push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					console.log(result);
					let item = this.fileList1[fileListLen];
					this.fileList1.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: Config.baseUrl + "/sys/oss/general/upload",
						filePath: url,
						name: "file",
						formData: {
							folderNames: [this.dataForm.lineName, this.dataForm.lineUnitName].toString()
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data).src);
							}, 1000);
						},
					});
				});
			},
			selectPeople(x) {
				this.dataForm.handleUserName = []
				this.dataForm.handleUserId = []
				x.forEach((k) => {
					this.dataForm.handleUserName.push(k.name)
					this.dataForm.handleUserId.push(k.id)
				})
				this.dataForm.handleUserName = this.dataForm.handleUserName.toString()
				this.dataForm.handleUserId = this.dataForm.handleUserId.toString()
			},
			getInit() {
				this.$api.to_http(`/handle/zhkjwurenjihandlerisk/optionInit`).then((res) => {
					if (res.data.code != 0) {
						return uni.$u.toast(res.data.msg)
					}
					this.selectData = [res.data.data.options1]
				})
			},
			getInfo() {
				this.$api.to_http(`/pipe/zhkjwurenjipiperisk/${this.dataForm.id}`).then((res) => {
					if (res.data.code != 0) {
						return uni.$u.toast(res.data.msg)
					}
					if (res.data.data.handleRiskDTO?.length > 0) {
						res.data.data.handleRiskDTO.forEach((x) => {
							if (x.annex) {
								if (JSON.parse(x.annex)) {
									x.fileList = JSON.parse(x.annex);
								} else {
									x.fileList = [JSON.parse(x.annex)];
								}
							}
						});
						res.data.data.handleRiskDTO.forEach((x) => {
							x.preview = [];
							if (Array.isArray(x.fileList)) {
								x.fileList.forEach((t) => {
									x.preview.push(t.url);
								});
							} else {
								x.fileList = [x.fileList];
								x.preview.push(x.fileList.url);
							}
						});
					}
					Object.assign(this.dataForm, res.data.data);

				})
			},
			completeTaskArrange(isHandle) {
				let data = {
					id: "",
					pipeRiskId: 0,
					handleUserName: "",
					riskTypeId: "",
					riskTypeName: "",
					handleUserId: "",
					remarks: "",
					isHandle,
					annex: []
				};
				data.pipeRiskId = this.dataForm.id;
				data.handleUserName = this.dataForm.handleUserNames;
				data.handleUserId = this.dataForm.handleUserIds;
				data.remarks = this.dataForm.remarks;
				data.riskTypeId = this.dataForm.riskTypeId;
				data.riskTypeName = this.dataForm.riskTypeName;

				let filedata = [];
				this.fileList1.forEach((x, i) => {
					filedata.push(x.url);
				});
				data.annex = JSON.stringify(filedata);
				this.$api.to_http(`/handle/zhkjwurenjihandlerisk`, data, 'POST')
					.then((res) => {
						if (res.data.code != 0) {
							return uni.$u.toast(res.data.msg)
						}
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack(-1)
						}, 500)
					})
			},
		}
	}
</script>

<style lang="less" scoped>
	.btns {
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		bottom: 1%;
		display: grid;
		grid-gap: 20rpx;
		grid-template-columns: 1fr 1fr;
		z-index: 2;
	}

	.success {
		position: fixed;
		width: 100%;
		bottom: 1%;
	}

	.title {
		color: #000;
		font-weight: bold;
		padding: 10rpx 20rpx;
	}

	.main_box {
		background: #fff;
		padding: 0rpx 20rpx;
		color: #323233;

		.imgs {
			display: grid;
			grid-gap: 20rpx;
			grid-template-columns: 1fr 1fr 1fr 1fr;

			image {
				border-radius: 20rpx;
			}
		}

		.text {
			display: flex;
			padding: 21rpx 0;
			margin: 8rpx 0;
			border-bottom: 1px solid rgb(235, 237, 240);
			font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;

			.label {
				width: 220rpx;
			}
		}
	}
</style>