zhgdyunapp_vue3/pages/carViolation/disposition/disposition.vue

<template>
	<view>
		<view class="barBox">
			<headers class="" :showBack="true">
				<view class="headerName">
					违章处置
				</view>
			</headers>
			<!-- <headers :showBack="true">
				<view class="title">
					<view class="backBtn">
						<view>
							<span class="tip">违章处置</span>
						</view>
					</view>
				</view>
			</headers> -->
		</view>
		<view class="content">
			<!-- <view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>违规原因</text>
				</view>
				<view class="row-content">
					<view class="row-input">
						<picker mode="selector" :range="alarmTypeArrList" range-key="name" @change="onChangeAlarm" filterable>
							<view class="picker" style="margin-left: 24rpx;">
								<view class="" style="color: #e1e1e1;" v-if="!alarmTypeItem.name">
									请选择违规原因
								</view>
								<view class="" v-else>
									{{alarmTypeItem.name}}
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>违规地点</text>
				</view>
				<view class="row-content">
					<input class="uni-input" placeholder="请输入违规地点" :value="alarmDesc" @blur="bindTextAreaBlur" />
				</view>
			</view> -->
			<!-- <view class="row-line" v-show="isDis === 'dis'">
				<view class="row-label">
					<text>描述</text>
				</view>
				<view class="row-content">
					<textarea :value="desc" @blur="bindTextAreaBlur" />
				</view>
			</view> -->
			<view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>处置结果</text>
				</view>
				<view class="row-content">
					<radio-group @change="isShowContent" :value="isDis">
						<radio value="dis" checked="true">已处置</radio>
						<radio value="ign">误报忽略</radio>
					</radio-group>
				</view>
			</view>
			<view class="row-line" v-show="isDis === 'dis'">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>选择违章人员</text>
				</view>
				<view class="row-content">
					<view class="row-input">
						<!-- <picker mode="selector" :range="workerList" range-key="workerName" @change="onChange" filterable>
							<view class="picker" style="margin-left: 24rpx;">
								<view class="" style="color: #e1e1e1;" v-if="!selectedItem.workerName">
									请选择违章人员
								</view>
								<view class="" v-else>
									{{selectedItem.workerName}}
								</view>
							</view>
						</picker> -->
						<g-picker style="flex: 1" :searchFlag="true"  :value="selectedItem.workerName" :columns="workerList"
							:filter="{label: 'workerName', value: 'id'}" input-align="left"
							@confirm="handleChangeEnterprise"></g-picker>
					</view>
				</view>
			</view>
			<view class="row-line" v-show="isDis === 'dis'">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>处置方式</text>
				</view>
				<view class="row-content">
					<radio-group @change="isShowContentType" :value="handleType">
						<radio value="1" checked="true">违章再教育</radio>
						<radio value="2">加入黑名单</radio>
					</radio-group>
				</view>
			</view>
			<!-- <view class="row-line">
				<view class="row-label">
					<text style="color: firebrick;">*</text>
					<text>上传图片</text>
				</view>
				<view class="row-content">
					<view class="uni-form-input imgBox_wrap">
						<view class="imgBox" v-show="imgFileList.length>0" v-for="(item,index) in imgFileList"
							:key="index">
							<image :src="item.url" class="img"
								@click="previewImage(item.url)">
							</image>
							<view @click="deleteImg(item,1)" style="margin: 10rpx;" class="deleteImg">×</view>
						</view>
						<view class="addImgBox" @click="uploadImg(1)" v-if="imgFileList.length<1">
							<image src="/static/icon-add.png" class="icon-add"></image>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="confirm-btn" @click="confirm">
			<view class="inner-btn">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
				    { name: '苹果' },
				    { name: '香蕉' },
				    { name: '橙子' },
				    { name: '葡萄' },
				        // ... 更多选项
				],
				selectedItem: {},
				imgFileList: [],
				alarmTypeArrList: [],
				alarmTypeItem: {},
				alarmType: "",
				
				isDis: 'dis',
				handleType:'1',
				workerId: '',
				alarmDesc: '',
				deductScore: '',
				workerList: [],
				workerInfoList: [],
				handleResult: '',
				alarmItem: {},
			}
		},
		onLoad(option) {
			this.alarmItem = JSON.parse(decodeURIComponent(option.item));
			console.log('alarmItem',this.alarmItem)
			// this.deductScore = this.alarmItem.aiDeductRule.deductScore
		},
		mounted() {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.getWorkerList()
			this.getDictionaryList();
		},
		methods: {
			onChange(e) {
				const index = e.detail.value;
				this.selectedItem = this.workerList[index];
				this.workerId = this.selectedItem.id
				console.log("change!!!!!!!!!")
			},
			onChangeAlarm(e) {
				const index = e.detail.value;
				this.alarmTypeItem = this.alarmTypeArrList[index];
				this.alarmType = this.alarmTypeItem.data
				console.log("change!!!!!!!!!")
			},
			handleChangeEnterprise(e, values, labels) {
				// console.log(e, values, labels)
				// this.workerId = values.join(',');
				this.workerId = values;
				this.selectedItem.workerName = labels.join('、')
				// selectedItem.workerName
			},
			confirm(){
				console.log(">>>>>>>>>>>>>>>>>>>>>>>");
				console.log(this.selectedItem);
				console.log(this.alarmItem);
				// if(this.alarmType === '' || this.alarmType === null || this.alarmType === undefined){
				// 	uni.showToast({
				// 	  title: '请选择违规原因',
				// 	  icon: "none"
				// 	})
				// 	return
				// }
				// if(this.alarmDesc === '' || this.alarmDesc === null || this.alarmDesc === undefined){
				// 	uni.showToast({
				// 	  title: '请输入违规地点',
				// 	  icon: "none"
				// 	})
				// 	return
				// }
				// if(this.imgFileList.length == 0){
				// 	uni.showToast({
				// 	  title: '请上传图片',
				// 	  icon: "none"
				// 	})
				// 	return
				// }
				let requestData = {}
				
					
				if(this.isDis === 'dis') {
					requestData = {
						...this.alarmItem,
						handleResult: 1,
						handleDone: true,
						projectSn: this.projectSn,
						workerInfoList: [{id: this.workerId}],
						handleType: this.handleType,
					}
					if(this.workerId === '' || this.workerId === null || this.workerId === undefined){
						uni.showToast({
						  title: '请选择违章人员',
						  icon: "none"
						})
						return
					}
				} else if(this.isDis === 'ign'){
					requestData = {
						...this.alarmItem,
						handleResult: 2,
						projectSn: this.projectSn,
					}
				}
				console.log(requestData)
				return
				this.sendRequest({
					// url: 'xmgl/carDangerDetectRecord/edit',
					url: 'xmgl/carDangerDetectRecord/setFalsePositive',
					method: "post",
					data: requestData,
					success: res => {
						if (res.code == 200) {
							console.log('res', res)
							uni.navigateBack({delta: 2})
						}
					}
				})
			},
			getWorkerList(){
				this.sendRequest({
					url: 'xmgl/workerInfo/selectWorkerInfoList',
					method: "post",
					data: {
						projectSn: this.projectSn,
					},
					success: res => {
						if (res.code == 200) {
							console.log('workerListRes', res)
							this.workerList = res.result.records
						}
					}
				})
			},
			getDictionaryList(){
				this.sendRequest({
					url: 'xmgl/dictionaryItem/list',
					method: "get",
					data: {
						projectSn: this.projectSn,
						dictionaryEncoding: "ai_analyse_hard_ware_alarm_record_type",
					},
					success: res => {
						if (res.code == 200) {
							console.log('alarmTypeArrList', res)
							this.alarmTypeArrList = res.result
						}
					}
				})
			},
			isShowContent(e){
				this.isDis = e.detail.value
				if(this.isDis === 'ign'){
					this.cleanForm()
				}
			},
			isShowContentType(e){
				this.handleType = e.detail.value
			},
			cleanForm(){
				this.workerId = ''
				// this.desc = ''
				// this.deductScore = ''
			},
			bindTextAreaBlur(e) {
				this.alarmDesc = e.detail.value
				console.log(e.detail.value)
			},
			change(e) {
				console.log("e:", e);
			},
			//上传附件
			uploadImg(type) {
				var that = this
				if (type == 1) {
					uni.chooseImage({
						count: 5 - that.imgFileList.length,
						success(res) {
							const tempFilePaths = res.tempFilePaths;
							uni.uploadFile({
								url: that.url_config + 'upload/image', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'files',
								success: (uploadFileRes) => {
									let data = {
										name: JSON.parse(uploadFileRes.data).data[0].filename,
										url: that.url_config+'image/' + JSON.parse(uploadFileRes.data).data[0].imageUrl
									};
									that.imgFileList.push(data)
									uni.getImageInfo({
										src: tempFilePaths[0],
										success: (resInfo) => {
											console.log('传过去啦 resInfo', resInfo)
											that.imgList = {
												imgUrl: tempFilePaths[0],
												imgWidth: resInfo.width,
												imgHeight: resInfo.height,
												// team:'班组人员',
												// name: '张三'
											}
											that.openImg = true
										}
									})
									that.openImg = false
			
								}
							});
						}
					})
				}
			},
			//删除附件
			deleteImg(val, type) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除该附件吗?',
					success: function(res) {
						if (res.confirm) {
							if (type == 1) {
								let fileArr = JSON.parse(JSON.stringify(that.imgFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.imgFileList = fileArr;
							} else if (type == 2) {
								let fileArr = JSON.parse(JSON.stringify(that.videoFileList));
								fileArr.forEach((item, index) => {
									if (item.url == val.url) {
										fileArr.splice(index, 1)
									}
								})
								that.videoFileList = fileArr;
							}
			
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			},
			//预览图片
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-input {
		width: 70%;
		height: 78rpx;
		line-height: 78rpx;
		border: 2rpx solid rgba(42, 43, 91, 0.3);
		padding: 0px 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		font-size: 28rpx;
	}
	.uni-input-placeholder{
		color: rgb(225, 225, 225);
	}
	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		width: 75%;
	
		.imgBox {
			width: 120rpx;
			height: 120rpx;
			display: inline-flex;
			position: relative;
			margin-right: 30rpx;
			margin-bottom: 16rpx;
	
			.img {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
	
			.deleteImg {
				position: absolute;
				right: -6rpx;
				top: -36rpx;
				font-size: 30rpx;
				color: #fff;
			}
	
		}
	
		.addImgBox {
			border: 1px solid rgba(42, 43, 91, 0.1);
			background-color: #f6f5f8;
			width: 120rpx;
			height: 120rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border-radius: 20rpx;
			font-size: 24rpx;
	
			.icon-add {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.confirm-btn{
		width: 100%;
		height: 90rpx;
		// background-color: darkred;
		position: absolute;
		bottom: 5%;
		display: flex;
		justify-content: center;
		.inner-btn{
			width: 65%;
			height: 90rpx;
			color: #fff;
			background-color: #5181f6;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
		}
	}
	.content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.row-line{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			width: 100%;
			.row-label{
				display: flex;
				justify-content: flex-end;
				width: 30%;
			}
			.row-content{
				width: 70%;
				margin-left: 40rpx;
				display: flex;
				radio{
					// font-size: 36rpx;
					margin-right: 20rpx;
					// transform:scale(0.7);
				}
				:deep(uni-textarea ){
					width: 70%;
					height: 200rpx;
					padding: 26rpx 28rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					// background-color: #efefef;
					border: 1px solid #d8d8d8;
					border-radius: 6rpx;
					.uni-textarea-compute {
						width: 100%;
						height: 100%;
						overflow: auto;
					}
				}
				.row-select{
					width: 70%;
					height: 68rpx;
					border: 1px solid #d8d8d8;
					display: flex;
					align-items: center;
					border-radius: 6rpx;
					background-color: #fff;
				}
				.row-input{
					width: 70%;
					height: 78rpx;
					border: 1px solid #d8d8d8;
					display: flex;
					align-items: center;
					border-radius: 6rpx;
					.g-picker {
						padding: 24rpx 32rpx;
					}
				}
				.select-container{
					// height: 80px;
					// overflow: auto;
				}
				
				:deep( .uni-radio-input ){
					border: 2rpx solid #171717;
					// background-color: white !important;
					width: 28rpx;
					height: 28rpx;
				}
				
				:deep( .uni-radio-input.uni-radio-input-checked:before ){
					content: '';
					background-color: #2F8FF3;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					transform: translate(-50% -50%) scale(.73) !important;
				}
			}
		}
	}
	
	.barBox {
		background-color: #5181F6;
	}

	.title {
		height: 44px;
		line-height: 44px;
		font-size: 40rpx;
		width: 750rpx;
		// background-color: #5181F6;
		// color: #fff;
		text-align: center;
		position: relative;
	}


	.backBtn {
		// display: flex;
		// justify-content: flex-start;
		font-size: 30rpx;
		position: absolute;
		left: 20%;
	}

	.back {
		font-size: 24rpx;
	}

	.tip {
		margin-left: 5rem;
	}
</style>