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_box" v-for="item,index in kindnum" :key="index" v-if="appointPestNames[index]">
						<view class="kind_bot">
							<p class="kind_bot_title">害虫种类：</p>
							<view class="input" @click="pickerchange(index)">
								<input type="text" v-model="selector[Number(appointPestNames[index])]" :disabled="!checked2" />
								<u-icon name="arrow-down" class="icon"></u-icon>
							</view>
						</view>
						<view class="kind_bot">
							<p class="kind_bot_title">害虫数量：</p>
							<input type="number" v-model="appointPestNums[index]" :disabled="!checked2" />
						</view>
						<u-icon name="plus-circle" class="icons" size="40" color="#28AE4F" @click="addkindnum(index)" v-if="index==0"></u-icon>
						<u-icon name="trash" class="icons" size="40" color="#ff0000" @click="jiankindnum(index)" v-else></u-icon>
					</view>
					<u-picker v-model="pickertf" mode="selector" @confirm="confirmFun2" :default-selector="[Number(appointPestNames[datasindex])]" :range="selector"></u-picker>
					<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: [],
				kindnum:1,
				kindtf:-1,
				datasindex:null,
				appointPestNames:[-1],//害虫名称
				appointPestNums:[],//害虫数量
			}
		},
		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
					}
				})
				console.log(res)
				this.form = JSON.parse(res)
				console.log(this.form)
				if(this.conf==""){
					this.appointPestNames = this.form.appointPestName.split("#")
					this.appointPestNums = this.form.appointPestNum.split("#")
					if(this.appointPestNames.length==0){
						this.kindnum = 1
					}else{
						this.kindnum = this.appointPestNames.length
					}
					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
					}
				}else{
					if(res){
						uni.showToast({
							title: '操作成功！',
							duration: 2000,
							icon:"none"
						});
					}
				}
				//种类
			},
			btn() {
				if(this.checked1==true || this.checked2==true || this.checked3==true || this.checked4==true){
					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"
					}
					var obj = {}
					for(var i=0;i<this.kindnum;i++){
						obj["appointPestName"+(i+1)] = this.appointPestNames[i]
						obj["appointPestName"] = this.appointPestNames.join("#")
						obj["appointPestNum"+(i+1)] = this.appointPestNums[i]
						obj["appointPestNum"] = this.appointPestNums.join("#")
					}
					Object.assign(this.form,obj)
					console.log(this.form)
					this.conf = JSON.stringify(this.form)
					var namesome = this.appointPestNames.some((item)=>{
						return item == -1
					})
					var numsome = false;
					if(this.appointPestNums.length != this.appointPestNames.length){
						numsome = true
					}
					var arr = false
					if(this.checked1){
						if(!this.form.pestCategoryNum){
							uni.showToast({
								title: '请输入害虫种类数量！',
								duration: 2000,
								icon:"none"
							});
							arr=false
						}else{
							arr=true
						}
					}
					if(this.checked2){
						if(namesome){
							uni.showToast({
								title: '请将指定害虫数量信息填写完全！',
								duration: 2000,
								icon:"none"
							});
							arr=false
						}else if(numsome){
							uni.showToast({
								title: '请将指定害虫数量信息填写完全！',
								duration: 2000,
								icon:"none"
							});
							arr=false
						}else{
							arr = true
						}
					}
					if(this.checked3){
						if(!this.form.pestTotalNum){
							uni.showToast({
								title: '请输入害虫种类总和数量！',
								duration: 2000,
								icon:"none"
							});
							arr=false
						}else{
							arr=true
						}
					}
					if(this.form.phone){
						if(!this.phonetf && arr){
							this.notealloc()
						}
					}else{
						uni.showToast({
							title: '请输入手机号码！',
							duration: 2000,
							icon:"none"
						});
					}
				}else{
					uni.showToast({
						title: '请在开启预警后点击确定！',
						duration: 2000,
						icon:"none"
					});
				}
				
			},
			phonereg() {
				if (/^1[23456789]\d{9}$/.test(this.form.phone)) {
					this.phonetf = false
				} else {
					this.phonetf = true
				}
			},
			confirmFun2(index) {
				this.appointPestNames[this.datasindex] = index[0]
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			pickerchange(index){
				if(this.checked2){
					this.pickertf = !this.pickertf
					this.datasindex = index
				}else{
					uni.showToast({
						title: '请在开启预警后输入！',
						duration: 2000,
						icon:"none"
					});
				}
			},
			addkindnum(){
				this.kindnum++
				this.appointPestNames.push(-1)
				console.log(this.appointPestNames)
			},
			jiankindnum(index){
				console.log(index)
				this.kindnum--
				console.log(this.appointPestNames)
				this.appointPestNames.splice(index,1)
				this.appointPestNums.splice(index,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_box{
				position: relative;
				.icons{
					position: absolute;
					top: 40rpx;
					right: 50rpx;
				}
			}
			.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>