uni-zhihuikuangshan/pages/workbench/gridding/gridding.vue

<template>
	<view>
		<!-- 入口列表 -->
		<view class="list">
			<view class="item" @click="go_query()">
				<view class="icon">
					<image src="./icon/icon_1.png" mode=""></image>
				</view>
				<view class="name">网格化查询</view>
			</view>
			<view class="item" @click="go_chart_statistics()">
				<view class="icon">
					<image src="./icon/icon_2.png" mode=""></image>
				</view>
				<view class="name">图表统计</view>
			</view>
			<view class="item" @click="go_timeline_details()">
				<view class="icon">
					<image src="./icon/icon_3.png" mode=""></image>
				</view>
				<view class="name">记录详情</view>
			</view>
		</view>

		<!-- 提交内容 -->
		<view class="content">
			<view class="title">网格化管理巡回检查</view>

			<view class="inner">
				<view class="input_box">
					<view class="label"><text> * </text>网格编号（单选）：</view>
					<view class="box" @click="change_bianhao()">
						{{array_text_bianhao}}
					</view>
				</view>
				<view class="input_box" v-if="array_fanwei.length != 0">
					<view class="label"><text> * </text>网格范围（单选）：</view>
					<view class="box" @click="change_fanwei()">
						{{array_text_fanwei}}
					</view>
				</view>
				<view class="input_box" v-if="array_quyu.length != 0">
					<view class="label"><text> * </text>网格区域（多选）：（选择网格范围后自动出现）</view>
					<view class="box" @click="open">
						{{array_text_quyu}}
					</view>
				</view>
				<view class="input_box">
					<view class="label"><text> * </text>巡检日期（单选）：</view>
					<view class="box">
						<uni-datetime-picker type="date" :value="single" @change="change_time" />
					</view>
				</view>
				<view class="input_box">
					<view class="label"><text> * </text>巡检人员：</view>
					<view class="box" @click="open_renyuan">
						{{array_text_renyuan}}
					</view>
				</view>
				<!-- 图片 -->
				<view class="input_box">
					<view class="label">现场照片：</view>
					<view class="img_box">
						<view class="item" v-for="(item,index) in up_img_list" :key="index"
							@click="open_img(item.path)">
							<image :src="item.path" mode="aspectFill"></image>
							<view class="clear" @click.stop="del_img(index)">
								<uni-icons type="clear" size="20" color="red"></uni-icons>
							</view>
						</view>
						<view class="item" v-if="up_img_list.length < 1" @click="up_img()">
							<view class="image">+</view>
						</view>
					</view>
				</view>

				<view class="btn" @click="tijiao()">提交</view>
			</view>
		</view>

		<!-- 弹出层 -->
		<!-- 网格区域 -->
		<uni-popup ref="popup" type="bottom">
			<view class="select_box">
				<checkbox-group @change="checkboxChange">
					<view class="item" v-for="item in array_quyu" :key="item.value">
						<view class="text">{{item.name}}</view>
						<view class="box">
							<checkbox style="transform:scale(0.7)" :value="item.value" :checked="item.checked" />
						</view>
					</view>
				</checkbox-group>
			</view>
		</uni-popup>
		<!-- 巡检人员 -->
		<uni-popup ref="popup_renyuan" type="bottom">
			<view class="select_box">
				<checkbox-group @change="checkboxChange_renyuan">
					<view class="item" v-for="item in array_renyuan" :key="item.value">
						<view class="text">{{item.name}}</view>
						<view class="box">
							<checkbox style="transform:scale(0.7)" :value="item.value" :checked="item.checked" />
						</view>
					</view>
				</checkbox-group>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		set_base_url
	} from '@/common/set_base_url.js'

	export default {
		data() {
			return {
				// 当前煤矿编码
				mine_code: "",
				// 上传图片的基础路径
				base_url: "",

				// 当前选中的网格编号文本
				array_text_bianhao: "请选择",
				// 网格编号的配置参数
				array_bianhao: [],
				// 网格编号的原始数据
				array_data_bianhao: [],
				// 选中网格编号的id
				array_id_bianhao: "",


				// 网格范围
				// 文本
				array_text_fanwei: "请选择",
				// 配置参数
				array_fanwei: [],
				// 原始数据
				array_data_fanwei: [],
				// id
				array_id_fanwei: "",

				// 网格区域
				// 文本
				array_text_quyu: "请选择",
				// 配置参数
				array_quyu: [],
				// 原始数据
				array_data_quyu: [],
				array_id_quyu: "",

				// 巡检人员
				// 文本
				array_text_renyuan: "请选择",
				// 配置参数
				array_renyuan: [],
				// 原始数据
				array_data_renyuan: [],
				array_id_renyuan: "",


				// 已上传图片列表
				up_img_list: [],

				// 巡检时间
				single: "",

				// 提交的图片地址
				img_url: ""
			};
		},
		onLoad() {
			// 初始化当前煤矿编码
			this.mine_code = uni.getStorageSync('mine_code')
			// 根据矿编码切换首页接口不同的请求基础路径
			this.base_url = set_base_url(this.mine_code)

			this.get_trouble_grid_number_list()
		},
		methods: {
			// 查询页
			go_query() {
				uni.navigateTo({
					url: "./grid_query/grid_query"
				})
			},
			// 图表统计页
			go_chart_statistics() {
				uni.navigateTo({
					url: "./chart_statistics/chart_statistics"
				})
			},
			// 时间线详情
			go_timeline_details() {
				uni.navigateTo({
					url: "./timeline_details/timeline_details"
				})
			},


			// 配置参数 网格编号
			get_trouble_grid_number_list() {
				uni.showLoading({
					mask: true
				})
				this.$api.trouble_grid_number_list({
					type: 1
				}).then((res) => {
					uni.hideLoading()
					console.log(res.data.data)
					this.array_data_bianhao = res.data.data

					const data = res.data.data
					data.forEach((item, index) => {
						this.array_bianhao.push(item.itemValue)
					})
				})
			},

			change_bianhao() {
				uni.showActionSheet({
					itemList: this.array_bianhao,
					success: (res) => {
						// 当前显示的名称
						this.array_text_bianhao = this.array_data_bianhao[res.tapIndex].itemValue
						// 当前选中的网格id
						this.array_id_bianhao = this.array_data_bianhao[res.tapIndex].id
						console.log(this.array_id_bianhao)


						// 获取前先清空
						// 网格范围
						// 文本
						this.array_text_fanwei = "请选择"
						// 配置参数
						this.array_fanwei = []
						// 原始数据
						this.array_data_fanwei = []
						// id
						this.array_id_fanwei = ""
						// 获取前先清空
						// 网格区域
						// 文本
						this.array_text_quyu = "请选择"
						// 配置参数
						this.array_quyu = []
						// 原始数据
						this.array_data_quyu = []
						// id
						this.array_id_quyu = ""

						// 巡检人员
						// 文本
						this.array_text_renyuan = "请选择"
						// 配置参数
						this.array_renyuan = []
						// 原始数据
						this.array_data_renyuan = []
						// id
						this.array_id_renyuan = ""
						// 获取网格范围
						uni.showLoading({
							mask: true
						})

						this.$api.trouble_grid_range_list({
							type: 1,

							grid_number_id: this.array_id_bianhao
						}).then((res) => {
							uni.hideLoading()
							console.log(res.data.data)
							this.array_data_fanwei = res.data.data

							const data = res.data.data
							data.forEach((item, index) => {
								this.array_fanwei.push(item.itemValue)
							})

						})


						// 获取巡检人员
						this.$api.trouble_grid_owner_list({
							type: 1,

							member_id: this.array_data_bianhao[res.tapIndex].member_id
						}).then((res) => {
							uni.hideLoading()
							console.log(res.data.data)
							this.array_data_renyuan = res.data.data

							const data = res.data.data
							const series = []
							data.map((item, index) => {
								//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
								var sevm = {};
								//给每一项中的参数初始化并赋值
								sevm['value'] = '"' + item.id + '"'
								sevm['name'] = item.itemValue
								//将项放进新的数组
								series.push(sevm)
							})
							this.array_renyuan = series
							this.$set(this.array_renyuan)
							console.log(this.array_renyuan)
						})


					}
				});
			},
			change_fanwei() {
				uni.showActionSheet({
					itemList: this.array_fanwei,
					success: (res) => {
						// 当前显示的名称
						this.array_text_fanwei = this.array_data_fanwei[res.tapIndex].itemValue
						// 当前选中的网格id
						this.array_id_fanwei = this.array_data_fanwei[res.tapIndex].id
						console.log(this.array_id_fanwei)

						// 获取前先清空
						// 网格区域
						// 文本
						this.array_text_quyu = "请选择"
						// 配置参数
						this.array_quyu = []
						// 原始数据
						this.array_data_quyu = []
						// id
						this.array_id_quyu = ""

						// 获取网格区域
						uni.showLoading({
							mask: true
						})
						this.$api.trouble_grid_region_list({
							type: 1,

							grid_range_id: this.array_id_fanwei
						}).then((res) => {
							uni.hideLoading()
							console.log(res.data.data)
							this.array_data_quyu = res.data.data

							const data = res.data.data
							const series = []
							data.map((item, index) => {
								//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
								var sevm = {};
								//给每一项中的参数初始化并赋值
								sevm['value'] = '"' + item.id + '"'
								sevm['name'] = item.itemValue
								//将项放进新的数组
								series.push(sevm)
							})
							this.array_quyu = series
							this.$set(this.array_quyu)
							console.log(this.array_quyu)
						})
					}
				});
			},

			open() {
				this.$refs.popup.open()
			},
			open_renyuan() {
				this.$refs.popup_renyuan.open()
			},

			// 多选区域
			checkboxChange: function(e) {
				var items = this.array_quyu,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}

				console.log(values)

				this.array_id_quyu = ""
				this.array_text_quyu = ""
				values.forEach((item, index) => {
					// console.log(item)
					this.array_id_quyu += item + ','

					this.array_quyu.forEach((item_2, index_2) => {
						console.log(item_2.value)

						if (item == item_2.value) {
							this.array_text_quyu += this.array_quyu[index_2].name + ','
						}
					})
				})
			},

			// 巡检人员
			checkboxChange_renyuan: function(e) {
				var items = this.array_renyuan,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}

				console.log(values)
				this.array_id_renyuan = values

				this.array_id_renyuan = ""
				this.array_text_renyuan = ""
				values.forEach((item, index) => {
					// console.log(item)
					this.array_id_renyuan += item + ','
					console.log(this.array_id_renyuan)
					this.array_renyuan.forEach((item_2, index_2) => {
						console.log(item_2.value)

						if (item == item_2.value) {
							this.array_text_renyuan += this.array_renyuan[index_2].name + ','
						}
					})
				})
			},

			// 巡检时间
			change_time(e) {
				this.single = e;
				console.log("-change事件:", e);
			},

			// 上传图片
			up_img() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(chooseImageRes.tempFiles[0]);

						uni.showLoading({
							mask: true,
							title: "上传中..."
						})

						uni.uploadFile({
							url: this.base_url + "/worksheet/design/up_images",
							header: {
								'Authorization': uni.getStorageSync('token_type') + ' ' + uni
									.getStorageSync('Authorization')
							},
							filePath: tempFilePaths[0],
							name: 'file',
							// formData只有H5存在
							formData: {
								image: chooseImageRes.tempFiles[0]
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data);
								console.log(JSON.parse(uploadFileRes.data));

								const img = JSON.parse(uploadFileRes.data)
								this.up_img_list.push(img.data)

								console.log(this.up_img_list)

								uni.hideLoading()

								uni.showToast({
									icon: "none",
									title: "上传成功"
								})
								this.$forceUpdate()
							}
						})
					}
				})
			},
			// 删除已上传图片
			del_img(index) {
				this.up_img_list.splice(index, 1)

				console.log(this.up_img_list)

				uni.showToast({
					icon: "none",
					title: "删除成功"
				})

				this.$forceUpdate()
			},
			open_img(path) {
				console.log(path)
				
				let urls = []
					urls[0] = path
				uni.previewImage({
					urls: urls
				});
			},

			// 提交
			tijiao() {
				this.array_id_quyu = this.array_id_quyu.substring(0, this.array_id_quyu.lastIndexOf(','))
				this.array_id_renyuan = this.array_id_renyuan.substring(0, this.array_id_renyuan.lastIndexOf(','))

				if (this.up_img_list.length != 0) {
					this.img_url = this.up_img_list[0].path
				}

				if (this.array_id_bianhao != "" && this.array_id_fanwei != "" && this.array_id_quyu != "" && this.single !=
					"" && this.array_id_renyuan != "") {
					console.log("网格编号：" + this.array_id_bianhao)
					console.log("网格范围：" + this.array_id_fanwei)
					console.log("网格区域：" + this.array_id_quyu)
					console.log("巡检日期：" + this.single)
					console.log("巡检人员：" + this.array_id_renyuan)
					console.log("现场照片：" + this.img_url)

					uni.showLoading({
						mask: true,
						title: "提交中..."
					})
					this.$api.trouble_grid_check_add({
						type: 1,

						grid_number_id: this.array_id_bianhao,
						grid_range_id: this.array_id_fanwei,
						grid_region_id: this.array_id_quyu,
						grid_owner_id: this.array_id_renyuan,
						img_url: this.img_url,
					}).then((res) => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "提交成功"
						})
						console.log(res)

						setTimeout(() => {
							this.go_timeline_details()
						}, 1500)
					})


				} else {
					uni.showToast({
						icon: "none",
						title: "请补充必填项"
					})
				}


			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #009FE8;
		box-sizing: border-box;
		padding: 25rpx;
	}

	.list {
		background-color: #FFFFFF;
		border-radius: 10rpx;

		box-sizing: border-box;
		padding: 50rpx 0;

		display: flex;
		justify-content: space-around;
		align-items: center;

		.item {
			font-size: 32rpx;
			text-align: center;

			.icon {
				image {
					width: 70rpx;
					height: 70rpx;
				}
			}

			.name {
				margin-top: 20rpx;
			}
		}
	}

	.content {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;

		box-sizing: border-box;
		padding: 30rpx 25rpx;

		.title {
			line-height: 80rpx;
			color: #2980B9;
			font-size: 38rpx;
			font-weight: 500;
		}

		.inner {
			padding-top: 10rpx;

			.input_box {
				margin-bottom: 20rpx;
				font-size: 32rpx;

				.label {
					min-height: 80rpx;
					line-height: 80rpx;
					color: #6C6F74;

					text {
						color: red;
					}
				}

				.box {
					width: 650rpx;
					min-height: 90rpx;
					line-height: 90rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #E9EBF2;

					box-sizing: border-box;
					padding: 0 25rpx;

					/deep/.uni-date-editor--x {
						.uniui-clear {
							display: none;
						}
					}

					/deep/.uni-date-x--border {
						box-sizing: border-box;
						border-radius: 4px;
						border: none;
					}

					/deep/.uni-date-x {
						padding: 0;
					}
				}

				.img_box {
					width: 650rpx;
					min-height: 160rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					border: 2rpx solid #E9EBF2;

					box-sizing: border-box;
					padding: 30rpx 25rpx 0;

					overflow: hidden;

					.item {
						position: relative;
						float: left;
						width: 180rpx;
						height: 170rpx;
						margin-right: 25rpx;
						margin-bottom: 25rpx;

						image {
							width: 180rpx;
							height: 170rpx;
						}

						.image {
							width: 180rpx;
							line-height: 170rpx;

							text-align: center;
							border: 1rpx solid #E9EBF2;
							font-size: 120rpx;
							color: #E9EBF2;

						}

						.clear {
							position: absolute;
							right: -10px;
							top: -10px;
						}
					}

					.item:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
		}
	}

	.select_box {
		background-color: #FFFFFF;
		border-radius: 10rpx 10rpx 0 0;
		width: 750rpx;

		box-sizing: border-box;
		padding: 30rpx 50rpx;

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

			border-bottom: 1rpx solid #E9EBF2;
			box-sizing: border-box;
			padding: 15rpx 0;

			.box {}

			.text {}
		}
	}

	.btn {
		margin-top: 40rpx;
		background-color: #009FE8;
		padding: 25rpx 50rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>