bigDataApp/pages/cbqxyj/warnset.vue

<template>
	<view style="padding-bottom: 30rpx;">
		<view class="basesel">
			<view class="basesel_list">
				<view class="basesel_list_tilte">
					预警设备选择：
				</view>
				<view class="basesel_list_sel" @click="accServiceShow = true">
					<view class="basesel_list_sel_left" v-show="!selbaselist.length">
						请选择预警
					</view>
					<view class="basesel_list_sel_left" v-show="selbaselist.length">
						<view class="" style="margin-right: 20rpx;" v-for="item in selbaselist" :key="item">
							{{item}}
						</view>
					</view>
					<u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
				</view>
			</view>
			<view class="basesel_calculate">
				<view class="" style="line-height: 27px;">
					预警计算：
				</view>
				<u-radio-group v-model="warnjihe">
					<u-radio name="0" icon-size="10" label-size="20">
						逐台预警
					</u-radio>
					<u-radio name="1" icon-size="10" label-size="20" :disabled="selbaselist.length<2">
						合并预警
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="target">
			<view class="target_title">
				<view class="target_title_left">
					<view class="target_title_left_title">
						目标种类预警
					</view>
					<view class="">
						每天害虫 种类数量达到此值时，短信预警
					</view>
				</view>
				<view class="target_title_right">
					<u-switch v-model="conf.pestCategory" size="40"></u-switch>
				</view>
			</view>
			<view class="">
				<view class="">
					害虫种类预警
				</view>
				<view class="">
					<u-input v-model="conf.pestCategoryNum" type="number" />
				</view>
			</view>
		</view>
		<view class="target">
			<view class="target_title">
				<view class="target_title_left">
					<view class="target_title_left_title">
						数量预警
					</view>
					<view class="">
						每天害虫 指定害虫数达到此值时，短信预警
					</view>
				</view>
				<view class="target_title_right">
					<u-switch v-model="conf.appointPest" size="40"></u-switch>
				</view>
			</view>
			<view class="target_text">
				<view class="">
					指定害虫数量预警
				</view>
				<view class="target_text_item" v-for="item,index in confnum" :key="index">
					<view class="target_text_item_sel" @click="selwormindex = index;wormshow=true">
						<view class="itemtwo_left" v-show="item.appointPestName==''">
							请选择害虫
						</view>
						<view class="itemtwo_left" v-show="item.appointPestName!=''">
							{{item.appointPestName}}
						</view>
						<u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
					</view>
					<view class="target_text_item_ipt">
						<u-input v-model="item.appointPestNum" type="number" />
					</view>
					<u-icon name="plus-circle" class="icon addordel" color="#14a478" size="45" @click="addconfitem"
						v-show="index==0"></u-icon>
					<u-icon name="trash" class="icon addordel" color="#ff4949" size="45" @click="delconfitem(index)"
						v-show="index!=0"></u-icon>
				</view>
			</view>
		</view>
		<view class="target">
			<view class="target_title">
				<view class="target_title_left">
					<view class="target_title_left_title">
						总数预警
					</view>
					<view class="">
						每天害虫总数数量达到此值时，短信预警
					</view>
				</view>
				<view class="target_title_right">
					<u-switch v-model="conf.pestTotal" size="40"></u-switch>
				</view>
			</view>
			<view class="">
				<view class="">
					害虫种类预警
				</view>
				<view class="">
					<u-input v-model="conf.pestTotalNum" type="number" />
				</view>
			</view>
		</view>
		<view class="target">
			<view class="target_title">
				<view class="target_title_left">
					<view class="target_title_left_title">
						综合预警
					</view>
					<view class="">
						监测每天出现的害虫种类及数量，短信预警
					</view>
				</view>
				<view class="target_title_right">
					<u-switch v-model="conf.pestWarn" size="40"></u-switch>
				</view>
			</view>
		</view>
		<view class="usersel">
			<view class="warmissue_itemone">
				<view class="warmissue_itemone_title">
					短信接受人：
				</view>
				<view class="" style="color: #14A478;" @click="tobook">
					预警通讯录编辑
				</view>
			</view>
			<view class="warmissue_itemtwo" @click="accServiceShowphone = true">
				<view class="itemtwo_left" v-show="!userphone.length">
					请选择短信接收人
				</view>
				<view class="itemtwo_left" v-show="userphone.length">
					<view class="" style="margin-right: 20rpx;" v-for="item in userphone" :key="item">
						{{item}}
					</view>
				</view>
				<u-icon name="arrow-down" class="icon" color="#999999"></u-icon>
			</view>
		</view>
		<view class="sendbox" @click="send">
			保存预警设置
		</view>
		<view class="">
			<u-mask :show="accServiceShow || accServiceShowphone" z-index="998"></u-mask>
			<u-select v-model="wormshow" :list="wormlist" @confirm="selconfirm"></u-select>
			<multiple-select v-model="accServiceShow" :value="accServiceShow" :data="serviceList"
				:default-selected="defaultSelected" @confirm="accServiceConfirm"></multiple-select>
			<multiple-select v-model="accServiceShowphone" :value="accServiceShowphone" :data="serviceListphone"
				:default-selected="defaultSelectedphone" @confirm="accServiceConfirmphone"></multiple-select>
		</view>
	</view>
</template>

<script>
	import multipleSelect from "../../components/multiple-select.vue";
	import dict from "../../static/data/cbd_pest_library.js"
	export default {
		components: {
			multipleSelect,
		},
		data() {
			return {
				warning_id:"",
				selbaselist: [],
				warnjihe: "0",
				accServiceShow: false,
				serviceList: [],
				defaultSelected: [],
				userphone: [],
				accServiceShowphone: false,
				serviceListphone: [],
				defaultSelectedphone: [],
				//预警配置
				conf: {
					pestCategory: false,
					pestCategoryNum: "",
					appointPest: false,
					pestTotalNum: "",
					pestTotal: false,
					pestWarn: false
				},
				confnum: [{
					appointPestName: "",
					appointPestNum: "",
					appointPestNameid:""
				}],
				device_ids: [],
				send_user: [],
				wormshow: false,
				wormlist: [],
				selwormindex: 0
			}
		},
		methods: {
			accServiceConfirm(e) {
				this.selbaselist = []
				this.device_ids = []
				for (var i = 0; i < e.length; i++) {
					this.selbaselist.push(e[i].name)
					this.device_ids.push(e[i].value)
				}
				console.log(e)
			},
			accServiceConfirmphone(e) {
				this.userphone = []
				this.send_user = []
				for (var i = 0; i < e.length; i++) {
					this.userphone.push(e[i].name)
					this.send_user.push(e[i].value)
				}
			},
			async getpeizhi(id) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.user_pest_warning_statsu',
					data: {
						warning_id: id
					}
				})
				console.log(res)
				this.confnum = []
				this.conf.pestCategory = res.conf.pestCategory == "on" ? true : false
				this.conf.appointPest = res.conf.appointPest == "on" ? true : false
				this.conf.pestTotal = res.conf.pestTotal == "on" ? true : false
				this.conf.pestWarn = res.conf.pestWarn == "on" ? true : false

				this.conf.pestCategoryNum = res.conf.pestCategoryNum
				this.conf.pestTotalNum = res.conf.pestTotalNum

				for (var key in res.device_ids) {
					this.selbaselist.push(res.device_ids[key]);
					this.defaultSelected.push(Number(key));
					this.device_ids.push(Number(key));
				}
				console.log(this.defaultSelected)
				for (var key in res.send_user) {
					this.userphone.push(res.send_user[key][0] + "/" + res.send_user[key][1]);
					this.defaultSelectedphone.push(Number(key))
					this.send_user.push(Number(key));
				}
				var flag = 0
				for (var key in res.conf) {
					if (key.indexOf("appointPestName") != -1) {
						flag++
					}
				}
				for (var i = 0; i < flag; i++) {
					// console.log(i)
					if (i == 0) {
						var obj = {
							appointPestName: dict[Number(res.conf["appointPestName"])],
							appointPestNum: res.conf["appointPestNum"],
							appointPestNameid:res.conf["appointPestName"]
						};
					} else {
						var obj = {
							appointPestName: dict[Number(res.conf["appointPestName" + i])],
							appointPestNum: res.conf["appointPestNum" + i],
							appointPestNameid:res.conf["appointPestName"+ i]
						};
					}
					this.confnum.push(obj);
				}
			},
			async getbaselist() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.user_warning_device_list',
					data: {
						device_type_id: "3",
						page: "1",
						page_size: "999999999"
					}
				})
				// console.log(res.data)
				for (var i = 0; i < res.data.length; i++) {
					var obj = {
						value: res.data[i].d_id,
						name: res.data[i].device_id,
					}
					this.serviceList.push(obj)
				}
			},
			async getuseriphonelist() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=device.device_sms_alert.user_warning_liaisons_list',
					data: {
						page: 1,
						page_size: 9999999,
					}
				})
				// console.log(res)
				this.serviceListphone = []
				for (var i = 0; i < res.data.length; i++) {
					var obj = {
						value: res.data[i].d_id,
						name: res.data[i].liaisons + "/" + res.data[i].phone,
					}
					this.serviceListphone.push(obj)
				}
			},
			tobook() {
				uni.navigateTo({
					url: "./addressbook"
				})
			},
			selconfirm(e) {
				console.log(e, this.selwormindex)
				this.confnum[this.selwormindex].appointPestName = e[0].label
				this.confnum[this.selwormindex].appointPestNameid = e[0].value
			},
			addconfitem() {
				for (var i = 0; i < this.confnum.length; i++) {
					if (this.confnum[i].appointPestName == "" ||
						this.confnum[i].appointPestNum == "") {
						uni.showToast({
							title: "请先将信息填写完成后添加",
							icon: "none"
						})
						return
					}
				}
				var obj = {
					appointPestName: "",
					appointPestNum: "",
				}
				this.confnum.push(obj)
			},
			delconfitem(index) {
				this.confnum.splice(index, 1)
			},
			yanzheng() {
				for (var i = 0; i < this.confnum.length; i++) {
					if (this.confnum[i].appointPestName == "" || this.confnum[i].appointPestNum == "") {
						return true
					}
				}
				return false
			},
			async send() {
				if (this.selbaselist.length == 0) {
					uni.showToast({
						title: "请选择预警设备",
						icon: "none"
					})
				} else if (this.conf.pestCategory == false &&
					this.conf.appointPest == false &&
					this.conf.pestTotal == false &&
					this.conf.pestWarn == false) {
					uni.showToast({
						title: "请开启至少一种预警",
						icon: "none"
					})
				} else if (this.conf.pestCategory && this.conf.pestCategoryNum == "") {
					uni.showToast({
						title: "请将目标种类预警信息填写完整",
						icon: "none"
					})
				} else if (this.conf.appointPest && this.yanzheng()) {
					uni.showToast({
						title: "请将数量预警信息填写完整",
						icon: "none"
					})
				} else if (this.conf.pestTotal && this.conf.pestTotalNum == "") {
					uni.showToast({
						title: "请将总数预警信息填写完整",
						icon: "none"
					})
				} else if (this.userphone.length == 0) {
					uni.showToast({
						title: "请选择短信接收人",
						icon: "none"
					})
				} else {
					console.log(this.device_ids)
					console.log(this.send_user)
					var obj = {

					}
					// console.log(this.confnum)
					for (var i = 0; i < this.confnum.length; i++) {
						if (i == 0) {
							obj['appointPestName'] = this.confnum[i].appointPestNameid
							obj['appointPestNum'] = this.confnum[i].appointPestNum
						} else {
							obj['appointPestName' + i] = this.confnum[i].appointPestNameid
							obj['appointPestNum' + i] = this.confnum[i].appointPestNum
						}
					}
					for (var key in this.conf) {
						if (key == "pestCategory" ||
							key == "appointPest" ||
							key == "pestTotal" ||
							key == "pestWarn" ) {
							obj[key] = this.conf[key] ? "on" : "off"
						}else{
							obj[key] = this.conf[key]
						}
					}
					console.log(obj)
					const res = await this.$myRequest({
						url: '/api/api_gateway?method=device.device_sms_alert.create_user_pest_warning',
						data: {
							conf: JSON.stringify(obj),
							device_ids: this.device_ids.join(","),
							send_user: this.send_user.join(","),
							warning_id: this.warning_id,
							warning_type: this.warnjihe
						}
					})
					console.log(res)
					uni.showToast({
						title: "预警配置成功",
						icon: "none"
					})
					uni.navigateBack({
						delta:1
					})
				}
			}
		},
		onLoad(option) {
			// console.log(dict)
			this.wormlist = []
			for (var key in dict) {
				var obj = {
					value: key,
					label: dict[key]
				}
				this.wormlist.push(obj)
			}
			this.getbaselist()
			this.getuseriphonelist()
			this.getpeizhi(option.id)
			this.warning_id = option.id
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F6F6FB;
	}

	.basesel {
		width: 95%;
		margin: 20rpx auto;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;

		.basesel_list {
			width: 100%;

			.basesel_list_tilte {
				margin-bottom: 60rpx;
				font-size: 32rpx;
			}

			.basesel_list_sel {
				display: flex;
				margin-bottom: 60rpx;

				.basesel_list_sel_left {
					width: calc(100% - 40rpx);
					display: flex;
					flex-wrap: wrap;
					color: #999999;
				}

				.icon {
					width: 40rpx;
				}
			}
		}

		.basesel_calculate {
			margin-top: 30rpx;
			display: flex;
		}

	}

	.usersel {
		width: 95%;
		margin: 20rpx auto;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;

		.warmissue_itemone {
			margin-bottom: 60rpx;
			display: flex;
			justify-content: space-between;

			.warmissue_itemone_title {
				font-size: 32rpx;
			}
		}

		.warmissue_item {
			margin-bottom: 60rpx;
			display: flex;

			.warmissue_item_title {
				width: 160rpx;
			}

			.warmissue_item_text {
				width: calc(100% - 160rpx);
			}
		}

		.warmissue_itemtwo {
			display: flex;

			.itemtwo_left {
				width: calc(100% - 40rpx);
				display: flex;
				flex-wrap: wrap;
				color: #999999;
			}

			.icon {
				width: 40rpx;
			}
		}
	}

	.target {
		width: 95%;
		margin: 20rpx auto;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;

		.target_title {
			margin-bottom: 40rpx;
			display: flex;
			justify-content: space-between;

			.target_title_left {
				font-size: 24rpx;
				color: #999999;

				.target_title_left_title {
					font-size: 32rpx;
					color: #2F2F30;
				}
			}
		}

		.target_text {
			width: 100%;

			.target_text_item {
				width: 100%;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				.target_text_item_sel {
					width: 40%;
					display: flex;
					justify-content: space-between;
					line-height: 70rpx;
					height: 70rpx;
					border-bottom: 1px solid #aaaaad;

					.itemtwo_left {
						color: #999999;
					}
				}

				.target_text_item_ipt {
					width: 40%;

					/deep/.u-input__right-icon {
						line-height: 35px;
					}
				}

				.addordel {
					width: 10%;
				}
			}
		}

		/deep/.uni-input-input {
			border-bottom: 1px solid #aaaaad;
		}
	}

	.sendbox {
		margin: 40rpx auto;
		width: 80%;
		background-color: #14A478;
		padding: 20rpx 0;
		border-radius: 59px;
		text-align: center;
		color: #fff;
	}
</style>