hitap-chat/pages/investigation/warningDetail.vue

<template>
	<view id="page">
		<view class="Width100 Box BorderBox">
			<view class="Content BorderBox Width100">
				<top-title @skipPage="dealFlag?dealFlag = false: $.back(1)" :isCuMethod="true" :is-show-left="true"
					:title="dealFlag?'处理': '预警处理'" :rightWidth='120' class="custom_bg">
				</top-title>
			</view>
			<view class="formBox" v-if="!dealFlag">
				<uni-forms :modelValue="formData" border>
					<uni-forms-item label="抓拍时间">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.warningTimeFormat"
								:disabled="!editFlag" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="问题描述">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请输入车辆号牌':''"
								v-model="formData.problemDescription" :disabled="!editFlag" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="违法行为">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.illegalActivities"
								:disabled="!editFlag" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="违法车辆">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.vehicleLicense"
								:disabled="!editFlag" />
						</view>
					</uni-forms-item>
					<uni-forms-item label="车主">
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.driverName"
								:disabled="!editFlag" />
						</view>
					</uni-forms-item>
				</uni-forms>
				<image class="itemImg" :src="formData.illegalImg ||require('./defaultImg.png')" mode="widthFix">
			</view>
			<view class="formBox" v-else>
				<uni-forms :modelValue="formData" border>
					<uni-forms-item label="处理类型" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "
							@click="handleTypeFlag = true ">
							<view v-if="dealData.handleType">
								{{dealData.handleType}}
							</view>
							<view v-else class="gray">
								请选择处理类型
							</view>
						</view>
					</uni-forms-item>
					<uni-forms-item label="处理结果" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<input type="text" placeholder="请填写处理结果" v-model="dealData.handleResult" />
						</view>
					</uni-forms-item>

					<uni-forms-item label="照片" required>
						<locationUpload :fileList="handleImg" @afterRead="(e) => afterRead(e, 'handleImg')"
							@delete="(e) => deletePic(e, 'handleImg')" name="1" :maxCount="1"></locationUpload>
					</uni-forms-item>
					<uni-forms-item label="处理人" required>
						<view class="Height100">
							{{ dealData.handlePersonnel }}
						</view>
					</uni-forms-item>
					<uni-forms-item label="处理时间" required>
						<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; ">
							<view class="Height100">
								{{ dealData.handleTime }}
							</view>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<!-- 分配社区列表 -->
			<u-picker :show="assignFlag" :columns="[squadronVillageList]" @cancel="assignFlag = false" keyName='sqname'
				@confirm="assignTo"></u-picker>
			<!-- 预警处理类型 -->
			<u-picker :show="handleTypeFlag" :columns="[handleTypeEnum]" @cancel="handleTypeFlag = false"
				keyName='sqname' @confirm="handleTypeSelect"></u-picker>
			<three class="footer-buttons" :type="'view'" first-text="处理" next-text="分配" :second-primary="true"
				@first="dealFlag = true" @last="assignFlag = true" v-if="propState!= '2'&& userFlag&&!dealFlag" />
			<view class="bottom" v-if="propState!= '2'&& !userFlag&&dealFlag">
				<view class="trapezoidal" @click="dealFlag = true" style="background: #2663BF;color: #fff;">
					<text>处理</text>
				</view>
			</view>
			<view class="bottom" v-if="propState!= '2'&&dealFlag">
				<view class="trapezoidal" @click="handleDeal" style="background: #2663BF;color: #fff;">
					<text>处理</text>
				</view>
			</view>

			<view style="width: 100%;height: 100rpx;"></view>
		</view>
	</view>
</template>

<script>
	import NoData from "../../components/no-data.vue";
	import Tabbar from "../../components/tabbar.vue";
	import TopTitle from "../../components/top-title";
	import $ from "../../common/globalJs/globalJs";
	import taskInfo from "../../components/task-info.vue";
	import uploadFile from "../../components/upload-file.vue";
	import Three from "../../components/bottom-button/three.vue";
	import BottomButton from "../../components/bottom-button/three.vue";
	import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js';
	import locationUpload from '@/components/u-upload/index.js'
	export default {
		// 组件
		components: {
			TopTitle,
			NoData,
			taskInfo,
			uploadFile,
			Three,
			BottomButton,
			locationUpload
		},
		data() {
			return {
				editFlag: false,
				$: this.$,
				formData: {
					communityCadre: "",
					communityCadrePhone: '',
					driverAddress: "",
					driverAuthorizedModel: "",
					driverIdNumber: "",
					driverName: "",
					driverPhone: "",
					drivingImg: "",
					insertPersonnel: "",
					insertTime: "",
					streetCommunity: "",
					vehicleBrand: "",
					vehicleColor: "",
					vehicleInsurance: "",
					vehicleLicense: "",
					vehicleStatus: "",
					vehicleType: "",
					villageCommunity: "",
					vin: ""
				},
				enumList: {},
				streetCommunityByXq: [],
				streetCommunityByJd: [],

				squadronVillageList: [],
				assignFlag: false,
				dealFlag: false,
				userFlag: false,
				handleTypeFlag: false,
				dealData: {
					// 预警主键
					"warningId": "",
					// 处理类型
					"handleType": "",
					// 处理结果
					"handleResult": "",
					// 处理人
					"handlePersonnel": "",
					// 处理时间
					"handleTime": "",
					// 处理图片
					"handleImg": ""
				},
				handleImg: [],
				handleTypeEnum: [],
				propState: '2'
			}
		},
		// 页面加载
		onLoad(e) {
			if (this.$.getData('userInfo').role.some(i => i == '中队民警农三轮')) {
				this.userFlag = true
			}
			if (e.warningId) {
				console.log(e, 'warningIdwarningIdwarningIdwarningIdwarningIdwarningId')
				this.getDetail(e.warningId);
			}
			if (this.propState) {
				this.propState = this.propState
			}
			//查询用户名称
			this.$request
				.globalRequest(
					"/hiddenDanger/auth/getOperatorInformation", {
						nuserid: this.$.getData('userInfo').username,
					},
					"GET"
				)
				.then((res) => {
					if (res.code === 200) {
						this.$.setData('cusername', res.result.cusername)
					}
				});
			this.$request
				.globalRequest(
					"/hiddenDanger/tricycle/getSquadronVillageList", {
						nuserId: this.$.getData('userInfo').username,
					},
					"GET"
				).then(res => {
					if (res.code == 200) {
						this.squadronVillageList = res.result
					}
				})
			//预警处理类型
			this.$request
				.globalRequest(
					"/hiddenDanger/tricycle/getHandleTypeEnum", {
						nuserId: this.$.getData('userInfo').username,
					},
					"GET"
				).then(res => {
					if (res.code == 200) {
						this.handleTypeEnum = res.result
					}
				})
			this.dealData.handleTime = this.timestampToTime()
			this.dealData.handlePersonnel = this.$.getData('cusername')
		},
		methods: {
			//取消
			handleCancel() {
				this.editFlag = false
				this.getDetail(this.formData.warningId)
			},
			//选择处理类型
			handleTypeSelect(e) {
				this.dealData.handleType = e.value[0]
				this.handleTypeFlag = false
			},
			//分配
			assignTo(e) {
				if (e.value[0].sqcode) {
					this.$request
						.globalRequest(
							"/hiddenDanger/tricycle/submitDistributionStatus", {
								warningId: this.formData.warningId,
								sqCode: e.value[0].sqcode
							},
							"GET"
						).then(res => {
							if (res.code == 200) {
								this.$.toast(res.result);
								setTimeout(() => {
									this.assignFlag = false
									this.$.back(1)
								}, 500)
							}
						})
				}
			},
			//处理
			handleDeal() {
				const {
					handleType,
					handleResult,
					handlePersonnel,
					handleTime
				} = this.dealData
				let handleImg = ''
				if (this.handleImg[0] && this.handleImg[0]?.url) {
					handleImg = this.handleImg[0]?.url
				}

				if (!handleType || !handleResult || !handlePersonnel || !handleTime | !handleImg) {
					return this.$.toast("请输入完成表单必填项");
				}
				this.$request
					.globalRequest(
						"/hiddenDanger/tricycle/saveTricycleWarningHandle", {
							"warningId": this.formData.warningId,
							handleType,
							handleResult,
							handlePersonnel,
							handleTime,
							handleImg
						},
						"POST"
					).then(res => {
						if (res.code == 200) {
							this.$.toast(res.result);
							setTimeout(() => {
								this.$.back(2)
							}, 500)
						}
					})
			},
			getDetail(warningId) {
				this.formData = {}
				this.$request
					.globalRequest(
						"/hiddenDanger/tricycle/getWarningDetails", {
							warningId
						},
						"GET"
					)
					.then((res) => {
						if (res.code === 200) {
							if (res.result[0]) {
								this.formData = res.result[0]
							} else {
								this.$.toast("未查询到预警详情，请联系管理员")
							}
						}
					});
			},

			timestampToTime() {
				var date = new Date()
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = date.getHours();
				if (String(h).length < 2) {
					h = '0' + String(h)
				}
				var m = date.getMinutes();
				if (String(m).length < 2) {
					m = '0' + String(m)
				}
				var s = date.getSeconds();
				if (String(s).length < 2) {
					s = '0' + String(s)
				}
				return Y + M + D + h + ':' + m + ':' + s; // 返回格式：YYYY-MM-DD
			},

			//获取随机id
			uuid(len, binary) {
				len = !len ? 36 : len;
				binary = !binary ? 16 : binary;
				return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"
					.replace(/[xy]/g, function(c) {
						var r = (Math.random() * binary) | 0,
							v = c == "x" ? r : (r & 0x3) | 0x8;
						return v.toString(binary);
					})
					.substring(0, len);
			},
			uploadFilePromise(event) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$.baseUrl + "/hiddenDanger/ftp/uploadFileToFtp", // 仅为示例，非真实的接口地址
						filePath: event?.file.url,
						name: "file",
						formData: {
							position: event.position,
							longitude: event.longitude,
							latitude: event.latitude
						},
						success: (res) => {
							resolve(res.data);
						},
					});
				});
			},
			async afterRead(event, key) {
				// console.log(key)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				const id = this.uuid();
				this[key].push({
					id,
					...event?.file,
					status: "uploading",
					message: "上传中",
				});
				const result = await this.uploadFilePromise(event);
				const resultInfo = JSON.parse(result);
				const index = this[key]?.findIndex((v) => v.id === id);
				if (resultInfo.code == 200) {
					this[key].splice(
						index,
						1,
						Object.assign(event?.file, {
							status: "success",
							message: "",
							result: resultInfo,
							url: resultInfo.result,

						})
					);
				} else {
					this.$.toast("上传失败");
					this[key].splice(
						index,
						1,

					);
				}
			},
			// 删除图片
			deletePic(event, keyName) {
				if (!this.editFlag) {
					return
				}
				this[keyName].splice(event.index, 1);
			},
		},
		onReady() {},
		// 页面卸载
		onUnload() {},
	}
</script>

<style>
</style>
<style lang="scss" scoped>
	.itemImg {
		max-width: 660rpx;
		max-height: 580rpx;
		margin: 0 auto;
	}

	.footer-buttons {
		z-index: 3;
	}

	page {
		background: #F6F8FA;
	}


	.query-form {

		font-size: 16px;
		height: 44px;
		background: #ffffff;
		box-shadow: 3px 0px 10px #ccc;
		color: #666666;
		position: sticky;
		// top: var(--status-bar-height + 88rpx);
		top: calc(var(--status-bar-height) + 88rpx);
		z-index: 10;

		.search-box {
			padding: 10px 10px 3px;
		}
	}

	.formBox {
		margin: 30rpx 20rpx;
		border: 1px solid #e6e6e6;
		background: #ffffff;
		padding: 0 20rpx 20rpx;
		box-sizing: border-box;

		/deep/ .uni-forms-item--border .uni-forms-item__content {
			justify-content: flex-end;
			text-align: right;
		}

		.photo {
			width: 100%;

			image {
				width: 100%;
			}
		}
	}

	.Box {
		padding-top: var(--status-bar-height);

		.Content {
			width: calc(100% - 48rpx);
			padding-bottom: 88rpx;
		}

		.Unit {
			padding: 12rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			box-shadow: 1px 1px 3px #ccc;

			.trapezoidal {
				position: absolute;
				top: -0px;
				right: 0px;
				color: #ffffff;
				font-size: 22rpx;
				font-weight: normal;
				z-index: 1;
			}

			image {
				width: 200rpx;
			}

			.right {
				flex: 1;
				padding-left: 30rpx;

				.title {
					font-size: 16px;
					width: 380rpx;
					min-height: 80rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.type {
					font-size: 14px;
					color: #666;
					font-weight: normal;

					text {
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	.label-box {
		display: flex;
		align-items: center;
		height: 110rpx;
		font-size: 30rpx;
		font-weight: 600;

		.border {
			background-color: #2663BF;
			height: 35rpx;
			width: 6rpx;
			margin-right: 14rpx;
		}
	}

	.label-box2 {
		height: 100rpx;


	}

	.label-box-small {
		font-size: 28rpx;
		margin-top: -25rpx;
		font-weight: 500;
	}

	.border-bottom {
		border-bottom: 1px #eee solid;
	}

	.border-top {
		border-top: 1px #eee solid;
	}


	/deep/ .uni-forms-item__label {
		font-size: 28rpx;
		height: auto;
		margin-bottom: 20rpx;
		white-space: nowrap;
	}

	/deep/ .u-input {
		background-color: #ffffff !important;
	}

	.detail-item-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.investigation-item-zl {
		.uni-forms-item--border {
			border: none;
		}

		border-top: 1px solid #eee;
	}

	.btn-right {
		width: 100%;
		text-align: right;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: calc(100% - 40rpx);
		padding: 18rpx 20rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-top: 1px solid #cccccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 3;
	}

	.Img {
		width: 512rpx;
		height: 440rpx;
		margin: 0 auto;
	}

	.trapezoidal {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		width: 20%;
		height: 100%;
		box-sizing: border-box;
		text-align: center;
		border-radius: 10rpx;
		line-height: 60rpx;

		&.primary {
			background: #2663BF;
			color: #fff;

			&::after,
			&::before {
				background: #2663BF;
			}
		}
	}

	.trapezoidal::before,
	.trapezoidal::after {
		content: '';
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		background: #E9EDF5;
		z-index: -1;
		transform-origin: bottom;
		box-sizing: border-box;
	}

	.trapezoidal::after {
		left: auto;
		right: 0;
		border-radius: 10rpx;
		background-color: #E9EDF5;
		border-left: 0 none;
	}

	.gray {
		color: gray;
	}
</style>