SHZHJCYJPTYWXTAPP/pages-yj/yjxt/check/dangerareacheck.vue

<!--
*危险区现场巡查
*
-->
<template>
	<view class="container">
		<uni-nav-bar dark :fixed="true" backgroundColor="#3F9EFF" statusBar="false" left-icon="left" left-text="返回"
			@clickLeft="toBack">
			<view class="nav-title">
				<text>{{title}}</text>
			</view>
		</uni-nav-bar>
		<uni-forms ref="baseForm" :model="formData">
			<uni-section title="行政区及危险区选择" type="circle">
				<view class="search-block">
					<view style="padding-left: 15px;padding-right: 15px;margin-top: 0px;">
						<uni-forms-item v-if="checkType==1" name="cityRegionValue" label="盟市" label-width="120px"
							required>
							<uni-data-select v-model="formData.cityRegionValue" :localdata="cityRegionData"
								@change="cityRegionChange" :clear="false" placeholder="请选择盟市"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item v-if="checkType==1" name="districtRegionValue" label="区旗县" label-width="120px"
							required>
							<uni-data-select v-model="formData.districtRegionValue" :localdata="districtRegionData"
								@change="districtRegionChange" placeholder="请选择区旗县"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item v-if="checkType==1" name="townRegionValue" label="乡镇" label-width="120px"
							required>
							<uni-data-select v-model="formData.townRegionValue" :localdata="townRegionData"
								@change="townRegionChange" placeholder="请选择乡镇"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item v-if="checkType==1" name="countryRegionValue" label="村" label-width="120px"
							required>
							<uni-data-select v-model="formData.countryRegionValue" :localdata="countryRegionData"
								@change="countryRegionChange" placeholder="请选择村"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item name="dangerAreaValue" label="危险区" label-width="120px">
							<uni-data-select v-model="formData.dangerAreaValue" :localdata="dangerAreaData"
								@change="dangerAreaChange" placeholder="请选择危险区"></uni-data-select>
						</uni-forms-item>
					</view>
				</view>
			</uni-section>
			<uni-section title="定位信息" type="circle">
				<view style="padding-left: 15px;padding-right: 15px;">
					<view class="view-flex-inline" style="margin-bottom: 10px;">
						<view style="width: 100px;">经纬度</view>
						<view v-if="longitude != '' && latitude != ''">{{longitude}},{{latitude}}</view>
					</view>
					<view style="margin-bottom: 5px;font-size: 0.6rem;color:skyblue;">
						备注：定位地址可进行人工修改</view>
					<uni-forms-item name='address' label="定位地址" label-width="120px">
						<uni-easyinput v-model="formData.address" placeholder="请录入定位地址" />
					</uni-forms-item>

					<uni-forms-item name='riverName' label="山洪沟名称" label-width="120px">
						<uni-easyinput v-model="formData.riverName" placeholder="请录入山洪沟名称" />
					</uni-forms-item>
				</view>
			</uni-section>
			<uni-section title="巡查反馈" type="circle">
				<view style="padding-left: 15px;padding-right: 15px;">
					<uni-forms-item name="isFlood" label="是否有山洪" label-width="120px" required>
						<uni-data-checkbox v-model="formData.isFlood" :localdata="checkItems.items"
							style="padding-top: 4px;">
						</uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item name="isDamage" label="是否成灾" label-width="120px" required>
						<uni-data-checkbox v-model="formData.isDamage" :localdata="checkItems.items"
							style="padding-top: 4px;">
						</uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item name="isWarn" label="是否发布预警" label-width="120px" required>
						<uni-data-checkbox v-model="formData.isWarn" :localdata="checkItems.items"
							style="padding-top: 4px;">
						</uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item v-if="formData.isWarn==1" name='warnInfo' label="预警信息" label-width="120px">
						<uni-easyinput v-model="formData.warnInfo" placeholder="请录入预警信息" />
					</uni-forms-item>
					<uni-forms-item name="isTransfer" label="是否人员转移" label-width="120px" required>
						<uni-data-checkbox v-model="formData.isTransfer" :localdata="checkItems.items"
							style="padding-top: 4px;">
						</uni-data-checkbox>
					</uni-forms-item>
					<uni-forms-item v-if="formData.isTransfer==1" name='transferInfo' label="人员转移信息"
						label-width="120px">
						<uni-easyinput v-model="formData.transferInfo" placeholder="请录入转移人数" />
					</uni-forms-item>
					<uni-forms-item name='remark' label="备注" label-width="120px">
						<uni-easyinput v-model="formData.remark" placeholder="请录入人员转移及人员伤亡、损失等灾害情况" />
					</uni-forms-item>
				</view>
			</uni-section>
			<uni-section title="巡查图片" sub-title="点击下方按钮开始拍摄" type="circle">
				<view style="padding-left: 15px;padding-right: 15px;">
					<view class="view-flex-inline">
						<view v-for="(item, index) in checkPhotos" :key="index" class="view-flex-block-center"
							style="width: 100px;">
							<view class="img-container">
								<view class="note-image-box">
									<view class="note-image-item">
										<view class="close-icon" @click="onCheckPhotoDel(index)">
											<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
										</view>
										<view class="image-box">
											<image :src="toOss(item)" mode="widthFix">
											</image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="view-flex-block-center" style="width: 80px;">
							<view class="img-container">
								<view class="note-image-box">
									<view class="note-image-item" @click="onCheckPhotoAdd()">
										<view class="image-box">
											<uni-icons type="plusempty" size="50" color="#eee"></uni-icons>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-section>
		</uni-forms>
		<view class="footer">
			<view class="control">
				<view class="view-flex-inline-center">
					<view class="block"
						style="width: 120px;height:28px;margin-left: 10px;margin-right: 10px;border-radius:7px;background-color:lightpink"
						@click="toSubmit()">
						<view class="view-flex-block-center">
							<uni-icons class="input-uni-icon" type="checkmarkempty" size="18" color="#999" />
						</view>
						<view class="view-flex-block-center" style="padding-left:5px;">
							<text style="color:black;font-size:0.7rem">立即提交</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		role
	} from "@/api/role.js";
	import http from '@/http/api.js';
	import {
		oss,
		devUrl,
		prodUrl
	} from '@/common/setting';
	import {
		gcoord
	} from '@/static/js/gcoord.global.prod.js'
	export default {
		data() {
			return {
				title: '现场巡查',
				baseURL: '',
				baseOSS: '',
				checkType: 0,
				id: '',
				warnId: '',
				warnAdcd: '',
				latitude: '',
				longitude: '',
				query: {},
				formData: {
					cityRegionValue: '',
					districtRegionValue: '',
					townRegionValue: '',
					countryRegionValue: '',
					dangerAreaValue: '',
					address: '',
					riverName: '',
					isFlood: 0,
					isDamage: 0,
					isWarn: 0,
					isTransfer: 0,
					warnInfo: '',
					transferInfo: '',
					remark: '',
				},
				rules: {
					cityRegionValue: {
						rules: [{
							required: true,
							errorMessage: '必选项',
						}]
					},
					districtRegionValue: {
						rules: [{
							required: true,
							errorMessage: '必选项',
						}, ]
					},
					townRegionValue: {
						rules: [{
							required: true,
							errorMessage: '必选项',
						}, ]
					},
					countryRegionValue: {
						rules: [{
							required: true,
							errorMessage: '必选项',
						}, ]
					},
					isFlood: {
						rules: [{
							required: true,
							errorMessage: '必选项',
						}, ]
					},
					isDamage: {
						rules: [{
							required: true,
							errorMessage: '必选项',
						}, ]
					},
					isWarn: {
						rules: [{
							required: true,
							errorMessage: '必选项',
						}, ]
					},
					isTransfer: {
						rules: [{
							required: true,
							errorMessage: '必选项',
						}, ]
					},
				},
				checkPhotos: [],
				checkItems: {
					items: [{
						'value': 0,
						'text': '否'
					}, {
						'value': 1,
						'text': '是'
					}],
					current: 0,
				},
				cityRegionData: [],
				districtRegionData: [],
				townRegionData: [],
				countryRegionData: [],
				dangerAreaData: [],
			}
		},
		onLoad(option) {
			let that = this;
			this.baseOSS = oss;
			this.baseURL = process.env.NODE_ENV === 'development' ? devUrl : prodUrl;
			this.checkType = option.type;
			if (this.checkType == 2) {
				this.id = option.id;
				this.warnId = option.warnId;
				this.warnAdcd = option.warnAdcd;
				this.formData.isWarn = 1;
				let params = {};
				params['id'] = this.id;
				this.getWarnDetail(params);
			}
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					//console.log('当前位置：' + JSON.stringify(res));
					that.latitude = res.latitude;
					that.longitude = res.longitude;
					that.getAddress(res.longitude, res.latitude);
				},
				fail(res) {
					uni.showModal({
						content: '获取经纬度失败',
						showCancel: false
					});
				}
			});
			if (this.checkType == 1) {
				this.getCityRegion({});
			} else if (this.checkType == 2) {
				this.getDangerAreaList({
					'adcd': this.warnAdcd
				})
			}
		},
		computed: {},
		onShow() {},
		onReady() {
			this.$refs.baseForm.setRules(this.rules)
		},
		methods: {
			toOss(path) {
				let url = this.baseOSS + path;
				return url;
			},
			//返回上一页
			toBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
			getAddress(lng, lat) {
				let that = this;
				let url = 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + lat + ',' + lng +
					'&key=4HYBZ-EB23D-SLC42-HQ5R3-LP3LQ-OZFU5';
				console.log(url);
				http.request({
					url: url,
					method: 'GET',
				}).then(res => {
					//console.log(JSON.stringify(res));
				}).catch(err => {
					//console.log(JSON.stringify(err))
					that.formData.address = err.data.result.address;
				})
			},
			getWarnDetail(params = {}) {
				let that = this;
				Object.assign(this.query, params);
				http.request({
					url: '/galaxy-business/yj/warn/detail',
					method: 'GET',
					params: this.query
				}).then(res => {
					if (res.success) {
						that.formData.warnInfo = res.data.warnInfo;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			cityRegionChange(e) {
				this.formData.cityRegionValue = e;
				this.districtRegionData = [];
				this.formData.districtRegionValue = '';
				this.townRegionData = [];
				this.formData.townRegionValue = '';
				this.countryRegionData = [];
				this.formData.countryRegionValue = '';
				this.dangerAreaData = [];
				this.formData.dangerAreaValue = '';
				let p = {
					'parentCode': this.formData.cityRegionValue
				}
				this.getDistrictRegion(p);
			},
			districtRegionChange(e) {
				if (e == undefined || e == null || e == '') {
					this.formData.districtRegionValue = '';
					this.townRegionData = [];
					this.formData.townRegionValue = '';
					this.countryRegionData = [];
					this.formData.countryRegionValue = '';
					this.dangerAreaData = [];
					this.formData.dangerAreaValue = '';
				} else {
					this.formData.districtRegionValue = e;
					this.townRegionData = [];
					this.formData.townRegionValue = '';
					this.countryRegionData = [];
					this.formData.countryRegionValue = '';
					this.dangerAreaData = [];
					this.formData.dangerAreaValue = '';
					let p = {
						'parentCode': this.formData.districtRegionValue
					}
					this.getTownRegion(p);
				}
			},
			townRegionChange(e) {
				if (e == undefined || e == null || e == '') {
					this.formData.townRegionValue = '';
					this.countryRegionData = [];
					this.formData.countryRegionValue = '';
					this.dangerAreaData = [];
					this.formData.dangerAreaValue = '';
				} else {
					this.formData.townRegionValue = e;
					this.countryRegionData = [];
					this.formData.countryRegionValue = '';
					this.dangerAreaData = [];
					this.formData.dangerAreaValue = '';
					let p = {
						'parentCode': this.formData.townRegionValue
					}
					this.getCountryRegion(p);
				}
			},
			countryRegionChange(e) {
				if (e == undefined || e == null || e == '') {
					this.formData.countryRegionValue = '';
					this.formData.dangerAreaValue = '';
					this.dangerAreaData = [];
				} else {
					this.formData.countryRegionValue = e;
					this.formData.dangerAreaValue = '';
					this.dangerAreaData = [];
					this.getDangerAreaList({
						'adcd': this.formData.countryRegionValue
					})
				}
			},
			dangerAreaChange(e) {
				if (e == undefined || e == null || e == '') {
					this.formData.dangerAreaValue = '';
				} else {
					this.formData.dangerAreaValue = e;
				}
			},
			getCityRegion(params = {}) {
				let that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/whole/yj/list',
					method: 'GET',
					data: params,
				}).then(res => {
					that.cityRegionData = res.data.map(item => {
						return {
							value: item.adcd,
							text: item.adnm,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getDistrictRegion(params = {}) {
				let that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/whole/yj/list',
					method: 'GET',
					data: params,
				}).then(res => {
					that.districtRegionData = res.data.map(item => {
						return {
							value: item.adcd,
							text: item.adnm,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getTownRegion(params = {}) {
				let that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/whole/yj/list',
					method: 'GET',
					data: params,
				}).then(res => {
					that.townRegionData = res.data.map(item => {
						return {
							value: item.adcd,
							text: item.adnm,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getCountryRegion(params = {}) {
				let that = this;
				http.request({
					url: '/galaxy-business/baseinfo/region/whole/yj/list',
					method: 'GET',
					data: params,
				}).then(res => {
					that.countryRegionData = res.data.map(item => {
						return {
							value: item.adcd,
							text: item.adnm,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			getDangerAreaList(params = {}) {
				let postData = Object.assign(params, this.query);
				let that = this;
				http.request({
					url: '/galaxy-business/map/dangerarea/select',
					method: 'GET',
					data: postData,
				}).then(res => {
					that.dangerAreaData = res.data.map(item => {
						return {
							value: item.dangerAreaPid,
							text: item.dangerAreaName,
						}
					})
				}).catch(err => {
					console.log(err)
				})
			},
			onCheckPhotoAdd() {
				let that = this;
				uni.chooseImage({
					sourceType: ['camera'],
					sizeType: ['compressed'],
					success: (res) => {
						const len = res.tempFilePaths.length;
						if (len === 1) {
							res.tempFilePaths.forEach(path => {
								that.uploadCheckPhoto(path);
							})
						} else {
							uni.showModal({
								content: '只能选择一张图片，请确认！',
								showCancel: false
							});
						}
					}
				})
			},
			uploadCheckPhoto(imagePath) {
				let that = this;
				uni.showLoading({
					title: '上传中'
				});
				uni.uploadFile({
					url: this.baseURL + '/galaxy-resource/oss/endpoint/put-file-attach?Blade-Auth=' +
						uni.getStorageSync('accessToken'),
					fileType: 'image',
					filePath: imagePath,
					name: 'file',
					success: (uploadFileRes) => {
						if (uploadFileRes.statusCode == 200) {
							let data = JSON.parse(uploadFileRes.data);
							if (data.success) {
								let path = data.data['name'];
								that.checkPhotos.push(path);
							}
						}
					},
					fail: (err) => {
						console.log(err);
						reject('err')
					},
					complete() {
						uni.hideLoading()
					}
				});
			},
			onCheckPhotoDel(index) {
				this.checkPhotos.splice(index, 1);
			},
			toSubmit() {
				let that = this;
				this.$refs.baseForm.validate().then(res => {
					//console.log('表单数据信息1：', res);
					that.submit();
				}).catch(err => {
					//console.log('表单错误信息：', err);
					uni.showModal({
						content: "录入错误，请根据提示信息检查录入内容!",
						showCancel: false,
						success(res) {
							if (res.confirm) {
								//that.$refs.baseForm.clearValidate();
							}
						}
					});
				})
			},
			submit() {
				let formdata = this.formData;
				formdata['checkType'] = this.checkType;
				if (this.checkType == 1) {
					if (this.formData.countryRegionValue != undefined && this.formData.countryRegionValue != '' && this
						.formData.countryRegionValue.length > 0) {
						formdata['adcd'] = this.formData.countryRegionValue;
					}
				} else if (this.checkType == 2) {
					formdata['warnId'] = this.warnId;
					formdata['adcd'] = this.warnAdcd;
				}

				if (this.formData.dangerAreaValue != undefined && this.formData.dangerAreaValue != '' && this.formData
					.dangerAreaValue.length > 0) {
					formdata['dangerAreaPid'] = this.formData.dangerAreaValue;
				}
				formdata['longitude'] = this.longitude;
				formdata['latitude'] = this.latitude;
				if (this.checkPhotos.length > 0) {
					let photos = '';
					for (let i = 0; i < this.checkPhotos.length; i++) {
						if (photos.length > 0) {
							photos = photos + ',';
						}
						photos = photos + this.checkPhotos[i];
					}
					formdata['checkPhotos'] = photos;
				}
				//console.log('toSubmit事件:', JSON.stringify(formdata));
				let that = this;
				http.request({
					url: '/galaxy-business/yj/check/report',
					method: 'POST',
					data: formdata
				}).then(res => {
					//console.log('res ', JSON.stringify(res));
					if (res.success) {
						if (res.code == 200) {
							//that.clearCache();
							uni.showModal({
								content: '巡查信息已成功提交',
								showCancel: false,
								success(res) {
									if (res.confirm) {
										that.toBack();
									}
								}
							});
						} else {
							uni.showModal({
								content: '提交失败',
								showCancel: false
							});
						}
					} else {
						uni.showModal({
							content: '提交失败',
							showCancel: false
						});
					}
				}).catch(err => {
					//	console.log('errr3',JSON.stringify(err));
					uni.showModal({
						content: '' + err.data.msg,
						showCancel: false
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 0 100rpx;
	}
</style>