RT_ZB/bigdata2/src/pages/forecasting/cbd/MessageWarn.vue

<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right" :class="'el-icon-arrow-right '+ (flag.flag == false ? 'breadcrumb_tab' : '')">
			<el-breadcrumb-item :to="{ path: '/index/cbd' }">物联网虫情测报</el-breadcrumb-item>
			<el-breadcrumb-item>短信通知</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="innerBox">
			<!-- 1 -->
			<div class="category">
				<div class="titleNum">
					<span>1</span>
				</div>
				<div class="wormItem">
					<h2>目标种类预警</h2>
					<div class="previewSwitchBox">
						<span>害虫种类数预警</span>
						<el-switch
							v-model="switch1"
							active-color="#13ce66"
							inactive-color="#dcdfe6"
							@change="switch1Fun"
						></el-switch>
					</div>
					<div class="limitValBox">
						<div>
							<el-input
								v-model="input1"
								type="number"
								ref="input"
								placeholder="请填写害虫数量"
								clearable
								@change="input1ChangeFun"
							></el-input>
						</div>
						<div class="hint">
							每天害虫
							<span>种类数量</span>达到此值时，短信预警
						</div>
					</div>
					<div class="previewBox">
						<el-button :type="input1!=''?'success':''" @click="previewFun" round size="mini">预览</el-button>
					</div>
				</div>
			</div>
			<!-- 2 -->
			<div class="category">
				<div class="titleNum">
					<span>2</span>
				</div>
				<div class="wormItem">
					<h2>数量预警</h2>
					<div class="previewSwitchBox">
						<span>指定害虫数量预警</span>
						<el-switch
							v-model="switch2"
							active-color="#13ce66"
							inactive-color="#dcdfe6"
							@change="switch2Fun"
						></el-switch>
					</div>
					<div class="limitValBox">
						<div class="limitWormItem">
							<div class="limitWormItemBox" v-for="(item,index) in planKind" :key="index">
								<el-select v-model="item.value" placeholder="请选择害虫种类">
									<el-option v-for="num in cbdPestNum" :key="num" :label="cbdPest[num]" :value="num"></el-option>
								</el-select>
								<el-input
									v-model="item.nums"
									type="number"
									placeholder="请填写害虫数量"
									clearable
									@change="wormNumFun2"
								></el-input>
								<i v-if="index==0" class="el-icon-circle-plus-outline" @click="addWormKind"></i>
								<i v-if="index!=0" class="el-icon-delete" @click="delWormKind(index)"></i>
							</div>
						</div>
						<div class="hint">
							每天
							<span>指定害虫数</span>达到此数量时，短信预警
						</div>
					</div>
					<div class="previewBox">
						<el-button :type="reversedMessage?'success':''" @click="previewFun2" round size="mini">预览</el-button>
					</div>
				</div>
			</div>
			<!-- 3 -->
			<div class="category">
				<div class="titleNum">
					<span>3</span>
				</div>
				<div class="wormItem">
					<h2>数量预警</h2>
					<div class="previewSwitchBox">
						<span>害虫数量总和预警</span>
						<el-switch
							v-model="switch3"
							active-color="#13ce66"
							inactive-color="#dcdfe6"
							@change="switch3Fun"
						></el-switch>
					</div>
					<div class="limitValBox">
						<div>
							<el-input
								v-model="input3"
								type="number"
								ref="input3"
								placeholder="请填写害虫数量"
								clearable
								@change="input3ChangeFun"
							></el-input>
						</div>
						<div class="hint">
							每天害虫
							<span>种类数量</span>达到此值时，短信预警
						</div>
					</div>
					<div class="previewBox">
						<el-button :type="input3!=''?'success':''" @click="previewFun3" round size="mini">预览</el-button>
					</div>
				</div>
			</div>
			<!-- 4 -->
			<div class="category">
				<div class="titleNum">
					<span>4</span>
				</div>
				<div class="wormItem">
					<h2>综合预警</h2>
					<div class="previewSwitchBox">
						<span>监测每天出现的害虫种类及数量，短信预警</span>
						<el-switch v-model="switch4" active-color="#13ce66" inactive-color="#dcdfe6"></el-switch>
					</div>
					<div class="previewBox">
						<el-button type="success" @click="previewFun4" round size="mini">预览</el-button>
					</div>
				</div>
			</div>
			<!-- 5 -->
			<div class="category">
				<div class="titleNum">
					<span>5</span>
				</div>
				<div class="wormItem">
					<h2>信息接收</h2>
					<div class="limitValBox">
						<div class="receptionPhone">
							<el-input
								v-model="input5"
								ref="tel"
								type="tel"
								placeholder="请填写信息接收手机号"
								clearable
								@change="telRegular"
							></el-input>
						</div>
					</div>
				</div>
			</div>
			<div>
				<el-button type="primary" @click="submitData()">提交</el-button>
				<el-button type="info">重置</el-button>
			</div>
		</div>
		<!-- 预览框 -->
		<el-dialog
			width="500px"
			top="50px"
			:visible.sync="dialogVisible"
			custom-class="previewDialog"
			:close-on-click-modal="false"
			:show-close="true"
		>
			<div class="noteWarnBj">
				<div class="noteWarnTxt" ref="txt" v-html="dialogHtml"></div>
				<div class="noteWarnTime">上午 8:49</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import dict from '../../../../static/js/cbd_pest_library.js'
export default {
	props: {
		flag: {
			flag: Boolean,
			siteID: Number
		},
	},
	data() {
		return {
			switch1: false,
			input1: '',
			dialogVisible: false,
			// 2
			switch2: false,
			input2: false,
			cbdPest: dict,
			cbdPestNum: 332,
			planKind: [
				{
					label: '',
					value: '',
					nums: 0
				}
			],
			// 3
			switch3: false,
			input3: '',
			// 4
			switch4: false,
			// 5
			input5: '',

			dialogHtml: '',

			value: true,
			input: '',
			options: [
				{
					value: '选项1',
					label: '1'
				},
				{
					value: '选项2',
					label: '2'
				}
			],
			value2: ''
			// redata: {}, //回显数据
		}
	},
	computed: {
		// 计算属性的 getter
		reversedMessage: function () {
			// `this` 指向 vm 实例
			var planKind = this.planKind
			var len = this.planKind.length
			for (var i = 0; i < len; i++) {
				if (!(planKind[i].value && planKind[i].nums != 0)) {
					return false
				}
				if (i == len - 1) {
					return true
				}
			}
		}
	},
	created() {
		// this.getHisDataList();
	},
	mounted() {
		// this.echartsFn();
		this.warningData()
	},
	methods: {
		switch1Fun() {
			console.log(this.switch1)
			if (this.switch1 && !this.input1) {
				this.$message({
					message: '请将数据填写完整，再进行操作',
					type: 'warning'
				})
				this.$refs.input.focus()
				this.switch1 = false
			}
		},
		previewFun() {
			if (this.input1) {
				this.dialogVisible = true
				var html =
					"尊敬的用户：您的虫情测报设备：868956044830804，于<span>2019-08-31</span>监测到害虫种类数量{'" +
					this.input1 +
					"'}种，请注意防范（详情请登陆<span>www.yfzhwlw.com</span>查看）"
				this.dialogHtml = html
			} else {
				this.$message({
					message: '请将数据填写完整，再进行查看',
					type: 'warning'
				})
				this.$refs.input.focus()
			}
		},
		input1ChangeFun() {
			if (!this.input1) {
				this.switch1 = false
			}
		},
		// 2
		addWormKind() {
			var planKind = this.planKind
			var len = this.planKind.length
			for (var i = 0; i < len; i++) {
				if (!(planKind[i].value && planKind[i].nums != 0)) {
					this.$message({
						message: '请将数据填写完整，再进行添加',
						type: 'warning'
					})
					return false
				}
				if (i == len - 1) {
					planKind.push({
						label: '',
						value: '',
						nums: 0
					})
				}
			}
		},
		delWormKind(index) {
			var planKind = this.planKind
			planKind.splice(index, 1)
		},
		previewFun2() {
			if (this.reversedMessage) {
				var html =
					"尊敬的用户：您的虫情测报设备：865650044512263，于<span>2019-08-31</span>监测到害虫{'" +
					this.cbdPest[this.planKind[0].value] +
					"'}数量{'" +
					this.planKind[0].nums +
					"'}种，请注意防范（详情请登陆<span>www.yfzhwlw.com</span>查看）"
				this.dialogHtml = html
				this.dialogVisible = true
			} else {
				this.$message({
					message: '请将数据填写完整，再进行查看',
					type: 'warning'
				})
			}
		},
		switch2Fun() {
			if (!this.reversedMessage) {
				this.$message({
					message: '请将数据填写完整，再进行操作',
					type: 'warning'
				})
				this.switch2 = false
			}
		},
		wormNumFun2() {
			if (!this.reversedMessage) {
				this.switch2 = false
			}
		},
		// 3
		switch3Fun() {
			console.log(this.switch1)
			if (this.switch3 && !this.input3) {
				this.$message({
					message: '请将数据填写完整，再进行操作',
					type: 'warning'
				})
				this.$refs.input3.focus()
				this.switch3 = false
			}
		},
		previewFun3() {
			if (this.input3) {
				this.dialogVisible = true
				var html =
					"尊敬的用户：您的虫情测报设备：868956044830804，于<span>2019-08-31</span>监测到害虫数量已达到{'" +
					this.input3 +
					"'}，请注意防范（详情请登陆<span>www.yfzhwlw.com</span>查看）"
				this.dialogHtml = html
			} else {
				this.$message({
					message: '请将数据填写完整，再进行查看',
					type: 'warning'
				})
				this.$refs.input3.focus()
			}
		},
		input3ChangeFun() {
			if (!this.input3) {
				this.switch3 = false
			}
		},
		// 4
		previewFun4() {
			this.dialogVisible = true
			var html =
				"尊敬的用户：您的虫情测报设备：868956044830804，于<span>2019-08-31</span>监测到害虫{'暗黑鳃金龟': '5头', '二点委夜蛾': '5头', '玉米螟': '23头', '东方粘虫': '1头', '蝼蛄': '1头'}（详情请登陆<span>www.yfzhwlw.com</span>查看）"
			// var html = "尊敬的用户：您的虫情测报设备：868956044830804，于<span>2019-08-31</span>监测到害虫数量已达到{'"+this.input3+"'}，请注意防范（详情请登陆<span>www.yfzhwlw.com</span>查看）";
			this.dialogHtml = html
		},
		// 5
		telRegular() {
			if (this.input5) {
				if (!/^1[3456789]\d{9}$/.test(this.input5)) {
					this.$message({
						message: '手机号码有误，请重填',
						type: 'warning'
					})
					this.$refs.tel.focus()
					return false
				}
			}
		},

		// 提交数据
		submitData() {
			let that = this
			var pestCategory = that.switch1 == true ? 'on' : 'off' //目标种类预警  pestCategory
			var appointPest = that.switch2 == true ? 'on' : 'off' //指定害虫数量预警 appointPest
			var pestTotal = that.switch3 == true ? 'on' : 'off' //害虫数量总和预警 pestTotal
			var pestWarn = that.switch4 == true ? 'on' : 'off' //综合预警 pestWarn
			console.log(that.planKind)
			var plantName = []
			var plantNums = []
			var plantObj = {}
			for (var i = 0; i < that.planKind.length; i++) {
				plantName.push(that.planKind[i].value)
				plantNums.push(that.planKind[i].nums)
				plantObj['appointPestNum' + (i + 1)] = that.planKind[i].nums
				plantObj['appointPestName' + (i + 1)] = that.planKind[i].value
			}
			plantObj['pestCategoryNum'] = that.input1 //目标种类预警
			plantObj['pestTotalNum'] = that.input3 //害虫数量总和预警
			plantObj['phone'] = that.input5 //信息接收
			plantObj['appointPestName'] = plantName.join('#') //指定害虫数量预警
			plantObj['appointPestNum'] = plantNums.join('#') //指定害虫数量预警
			plantObj['pestCategory'] = pestCategory
			plantObj['appointPest'] = appointPest
			plantObj['pestTotal'] = pestTotal
			plantObj['pestWarn'] = pestWarn

			let postData = that.qs.stringify({
				device_id: that.$route.params.id,
				conf: JSON.stringify(plantObj)
			})

			that
				.$axios({
					method: 'post',
					url: '/api_gateway?method=forecast.forecast_system.cbd_msg_conf',
					data: postData
				})
				.then((res) => {
					if (res.data.data == true && res.data.message == '') {
						that.$message({
							showClose: true,
							message: '设置成功',
							type: 'success',
							duration: 1500
						})
					} else {
						that.$message({
							showClose: true,
							message: '设置失败',
							type: 'error',
							duration: 1500
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},

		// 请求数据返显
		warningData() {
			let that = this
			let postData = that.qs.stringify({
				device_id: that.$route.params.id,
				conf: ''
			})
			that
				.$axios({
					method: 'post',
					url: '/api_gateway?method=forecast.forecast_system.cbd_msg_conf',
					data: postData
				})
				.then((res) => {
					if (res.data.data !== null || res.data.data !== '') {
						var redata = JSON.parse(res.data.data)
						that.input1 = redata.pestCategoryNum //目标种类预警
						that.input2 = redata.appointPestNum1 //指定害虫数量预警
						that.input3 = redata.pestTotalNum //害虫数量总和预警
						that.input5 = redata.phone //信息接收

						that.planKind[0].nums = redata.appointPestNum1 //数量预警害虫数量
						that.planKind[0].value = redata.appointPestName1 //数量预警害虫

						that.switch1 = redata.pestCategory == 'on' ? true : false //目标种类预警
						that.switch2 = redata.appointPest == 'on' ? true : false //指定害虫数量预警
						that.switch3 = redata.pestTotal == 'on' ? true : false //害虫数量总和预警
						that.switch4 = redata.pestWarn == 'on' ? true : false //综合预警

						var val = redata.appointPestName
						var nums = redata.appointPestNum
						var arr = val.split('#')
						var arrA = nums.split('#')
						that.planKind = []
						for (let i = 0; i < arr.length; i++) {
							var obj = {}
							obj['value'] = parseInt(arr[i])
							obj['nums'] = arrA[i]
							obj['label'] = ''
							that.planKind.push(obj)
						}
					}
				})
				.catch((err) => {
					console.log(err)
				})
		}
	}
}
</script>

<style lang='less' scoped>
.innerBox {
	background: #fff;
	border-radius: 15px;
	padding: 20px;
	.category {
		margin-top: 20px;
		display: flex;
		:first-child {
			margin-top: 0px;
		}
		.titleNum {
			display: inline-block;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			border-radius: 50%;
			background: rgba(20, 164, 120, 0.18);
			color: #14a478;
			margin-right: 20px;
			margin-top: 2px;
		}
		.wormItem {
			flex: 1;
			h2 {
				line-height: 30px;
				font-size: 18px;
				margin: 0;
			}
			.previewSwitchBox {
				font-size: 14px;
				line-height: 50px;
				letter-spacing: 2px;
			}
			.limitValBox {
				display: flex;
				align-content: center;
				.limitWormItem {
					> div {
						margin-bottom: 10px;
						:last-child {
							margin: 0;
						}
					}
				}
				.receptionPhone {
					margin: 10px 0 30px 0;
				}
				.el-select {
					width: 300px;
					margin-right: 20px;
				}
				.el-input {
					width: 300px;
					margin-right: 20px;
				}
				i {
					line-height: 40px;
					font-size: 21px;
					cursor: pointer;
					color: #35a478;
				}
				.hint {
					margin-left: 15px;
					line-height: 40px;
					font-size: 14px;
					color: #606060;
					span {
						color: #000;
						font-weight: bold;
					}
				}
			}
			.previewBox {
				margin: 15px 0;
				.el-button--success {
					background-color: #14a478;
					border-color: #14a478;
				}
				button {
					padding: 5px 15px;
				}
			}
		}
	}
}
/deep/.previewDialog.el-dialog {
	background: transparent;
	box-shadow: none;
	.el-dialog__headerbtn {
		.el-dialog__close {
			color: #ffffff;
			border: 1px solid #fff;
			border-radius: 50%;
			padding: 4px;
		}
		:hover {
			color: #14a478;
			border: 1px solid #14a478;
		}
	}
	.el-dialog__header {
		background: transparent;
		border-bottom: 0 solid transparent;
	}
	.el-dialog__body {
		padding: 0;
		.noteWarnBj {
			width: 500px;
			height: 775px;
			background: url(~@/assets/images/forecasting/cbd/noteWarnBj.png) no-repeat
				center;
			background-size: contain;
			overflow: hidden;
			.noteWarnTxt {
				width: 46%;
				margin: 136px 0 10px 23%;
				background: #f2f2f2;
				padding: 10px;
				span {
					color: #0099f2;
				}
			}
			.noteWarnTime {
				width: 46%;
				margin: 13px 0 10px 23%;
			}
		}
	}
}

.breadcrumb_tab {
	top: 60px !important;
}
</style>