bigDataApp/pages/cb/cbd/equip-set/note.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 44px;">
			<view style="position: fixed;z-index: 100;">
				<uni-nav-bar @clickLeft="clickLeft" left-icon="back" title="短信预警"></uni-nav-bar>
			</view>
			<view class="earlywarning">
				<view class="kind">
					<view class="kind_top">
						<p class="kind_top_title">目标种类预警</p>
						<u-switch v-model="checked1" size="30" style="margin-top: 6rpx;" active-color="#58C876"></u-switch>
					</view>
					<view class="kind_bot">
						<p class="kind_bot_title">害虫种类数量设置：</p>
						<input type="number" v-model="form.pestCategoryNum" :disabled="!checked1" />
					</view>
					<p class="hint">（每天害虫种类数量达到此数量时，短信预警）</p>
				</view>
				<view class="kind">
					<view class="kind_top">
						<p class="kind_top_title">指定害虫数量预警</p>
						<u-switch v-model="checked2" size="30" style="margin-top: 6rpx;" active-color="#58C876"></u-switch>
					</view>
					<view class="kind_bot">
						<p class="kind_bot_title">害虫种类：</p>
						<view class="input" @click="pickertf = !pickertf">
							<input type="text" v-model="selector[form.appointPestName]" :disabled="!checked2" />
							<u-icon name="arrow-down" class="icon"></u-icon>
							<u-picker v-model="pickertf" mode="selector" @confirm="confirmFun2" :default-selector="[form.appointPestName]"
							 :range="selector"></u-picker>
						</view>
					</view>
					<view class="kind_bot">
						<p class="kind_bot_title">害虫数量：</p>
						<input type="number" v-model="form.appointPestNum" :disabled="!checked2" />
					</view>
					<p class="hint">（每天指定害虫数量达到此数量时，短信预警）</p>
				</view>
				<view class="kind">
					<view class="kind_top">
						<p class="kind_top_title">害虫数量总和预警</p>
						<u-switch v-model="checked3" size="30" style="margin-top: 6rpx;" active-color="#58C876"></u-switch>
					</view>
					<view class="kind_bot">
						<p class="kind_bot_title">害虫总和数量设置：</p>
						<input type="number" v-model="form.pestTotalNum" :disabled="!checked3" />
					</view>
					<p class="hint">（每天害虫数量总和达到此数量时，短信预警）</p>
				</view>
				<view class="kind">
					<view class="kind_top">
						<p class="kind_top_title">综合预警</p>
						<u-switch v-model="checked4" size="30" style="margin-top: 6rpx;" active-color="#58C876"></u-switch>
					</view>
					<view class="kind_bot">
						<p class="kind_bot_title">每天检测害虫种类及数量，短信预警</p>
					</view>
				</view>
				<view class="kind">
					<view class="kind_top">
						<p class="kind_top_title">信息接受</p>
					</view>
					<view class="kind_bot">
						<p class="kind_bot_title">信息接受手机号：</p>
						<input type="number" v-model="form.phone" @blur="phonereg" />
					</view>
					<p class="hint" v-if="phonetf">请输入正确的手机号</p>
				</view>
				<view class="tijiao" @click="btn">
					确 定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cbddatas from "../../../../static/data/cbd_pest_library.js"
	export default {
		data() {
			return {
				checked1: false,
				checked2: false,
				checked3: false,
				checked4: false,
				pickertf: false,
				device_id: '',
				conf: "",
				form: {},
				phonetf: false,
				selector: []
			}
		},
		methods: {
			async notealloc() { //查询短信配置
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.forecast_system.cbd_msg_conf',
					data: {
						device_id: this.device_id,
						conf: this.conf
					}
				})
				this.form = JSON.parse(res)
				console.log(this.form)
				//种类
				if (this.form.pestCategory == "on") {
					this.checked1 = true
				} else {
					this.checked1 = false
				}
				//pestTotal 总和开关
				if (this.form.pestTotal == "on") {
					this.checked3 = true
				} else {
					this.checked3 = false
				}
				//pestWarn综合预警
				if (this.form.pestWarn == "on") {
					this.checked4 = true
				} else {
					this.checked4 = false
				}
				//appointPest指定害虫
				if (this.form.appointPest == "on") {
					this.checked2 = true
				} else {
					this.checked2 = false
				}
			},
			btn() {
				if (this.checked1 == true) {
					this.form.pestCategory = "on"
				} else {
					this.form.pestCategory = "off"
				}
				//pestTotal 总和开关
				if (this.checked3 == true) {
					this.form.pestTotal = "on"
				} else {
					this.form.pestTotal = "off"
				}
				//pestWarn综合预警
				if (this.checked4 == true) {
					this.form.pestWarn = "on"
				} else {
					this.form.pestWarn = "off"
				}
				//appointPest指定害虫
				if (this.checked2 == true) {
					this.form.appointPest = "on"
				} else {
					this.form.appointPest = "off"
				}
				// console.log(this.form)
				this.conf = JSON.stringify(this.form)
				this.notealloc()
				uni.navigateBack({
					delta: 1
				})
			},
			phonereg() {
				if (/^1[23456789]\d{9}$/.test(this.form.phone)) {
					this.phonetf = false
				} else {
					this.phonetf = true
				}
			},
			confirmFun2(index) {
				this.form.appointPestName = index
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		onLoad(option) {
			this.device_id = option.device_id
			this.notealloc()
			for (var key in cbddatas) {
				this.selector[key] = cbddatas[key]
			}
		}
	}
</script>

<style lang="scss">
	.earlywarning {
		position: absolute;
		top: 54px;
		width: 100%;

		.kind {
			width: 90%;
			margin: 0 auto 40rpx;

			.kind_top {
				display: flex;
				justify-content: space-between;

				.kind_top_title {
					border-left: 8rpx solid #28AE4F;
					height: 40rpx;
					padding-left: 20rpx;
				}
			}

			.kind_bot {
				display: flex;
				padding-left: 28rpx;
				margin: 30rpx 0 0;

				.kind_bot_title {
					font-size: 26rpx;
					color: #A7A7A7;
					margin-right: 10rpx;
				}

				input {
					border: 2rpx solid #E4E4E4;
					font-size: 26rpx;
					width: 55%;
					padding-left: 10rpx;
				}

				.input {
					position: relative;
					width: 55%;

					input {
						width: 100%;
					}

					.icon {
						position: absolute;
						top: 10rpx;
						right: 0;
					}
				}

			}

			.hint {
				font-size: 24rpx;
				text-align: right;
				color: #ff0000;
				margin-top: 10rpx;
			}
		}

		.tijiao {
			width: 90%;
			text-align: center;
			font-size: 34rpx;
			height: 60rpx;
			line-height: 60rpx;
			color: #FFFFFF;
			background-color: #28AE4F;
			margin: 80rpx auto 0;
			border-radius: 30rpx;
		}
	}
</style>