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

<template>
	<view>
		<view class="tit adminTit">
			联网模块
		</view>
		<view class="btns">
			 <button type="warn" @click="equipBtnControl('dtu_update')" size="mini">升级</button>
			 <button type="warn" @click="equipBtnControl('dtu_reboot')" size="mini">重启</button>
			 <button type="warn" @click="mqttInfo" size="mini">MQTT配置</button>
		</view>
		<view class="tit adminTit">
			板子设置
		</view>
		<view class="btns">
			 <button type="warn" size="mini">查看原始IMEI</button>
			 <button type="warn" size="mini">更改IMEI</button>
		</view>
		<view class="tit adminTit">
			强制操作
		</view>
		<view class="btns">
			<button type="warn" @click="equipBtnControl('takephoto')" size="mini">拍照</button>
			<button type="warn" @click="equipBtnControl('update')" size="mini">升级</button>
			<button type="warn" @click="equipBtnControl('reboot')" size="mini">重启</button>
			<button type="warn" @click="equipBtnControl('close_shake')" size="mini">震动关闭</button>
			<button type="warn" @click="equipBtnControl('open_shake')" size="mini">震动开启</button>
		</view>
		<view class="tit">
			设备开关
		</view>
		<view class="uni-list-cell">
			 <picker @change="turnChange($event,'ds')" value="equipContrlForm.ds" :range="dsArr">
				<text class="uni-input">{{dsArr[equipContrlForm.ds]}}</text>
				<view class="arrow"></view>
			</picker>
		</view>
	<!-- 	<view class="tit">
			工作状态
		</view>
		<view class="uni-list-cell">
			 <picker @change="turnChange($event,'ws')" :value="equipContrlForm.ws" :range="wsArr">
				<text class="uni-input">{{wsArr[equipContrlForm.ws]}}</text>
				<view class="arrow"></view>
			</picker>
			<u-modal v-model="wsModelShow" content="确定修改工作模式?"  show-cancel-button @confirm="wsConfirm" @cancel="wsCancel" ref="uModal" ></u-modal>
		    <u-toast ref="wsToast" />
		</view> -->
		<view class="tit">
			定时模式
		</view>
		<view class="uni-list-cell">
			 <picker @change="turnChange($event,'ts')" :value="equipContrlForm.ts" :range="tsArr">
				<text class="uni-input">{{tsArr[equipContrlForm.ts]}}</text>
				<view class="arrow"></view>
			</picker>
		</view>
		<template v-if="equipContrlForm.ts==0">
			<view class="tit">
				定时时长(h)
			</view>
			<view class="">
				<slider :value="equipContrlForm.tt" show-value="true" :min="1" :max="10" @change="sliderChange($event,'tt')"  block-color="#57C878" activeColor="#57C878" step="1" />
		</view>
		</template>
		<template v-if="equipContrlForm.ts==1">
			<view class="tit">
				开始结束时间
			</view>
			<view class="selectTime">
				<view class="uni-list-cell time" @click="selectTime('st')">
					<text>{{stLabel}}</text>
					<u-icon name="clock"></u-icon>
				</view>
				<text class="line">-</text>
				<view class="uni-list-cell time" @click="selectTime('et')">
					<text>{{etLabel}}</text>
					<u-icon name="clock"></u-icon>
				</view>
			</view>
			<u-select v-model="stShow" mode="single-column" :list="list" @confirm="stConfirm"></u-select>
			<u-select v-model="etShow" mode="single-column" :list="list" @confirm="etConfirm"></u-select>
		</template>
		<view class="tit">
			落虫时间(min)
		</view>
		<view class="">
			<slider :value="equipContrlForm.collt" show-value="true" :min="1" :max="20" @change="sliderChange($event,'collt')"  block-color="#57C878" activeColor="#57C878" step="1" />
		</view>
		<view class="tit">
			加热时间(min)
		</view>
		<view class="">
			<slider :value="equipContrlForm.htim" show-value="true" :min="1" :max="20" @change="sliderChange($event,'htim')" block-color="#57C878" activeColor="#57C878" step="1" />
		</view>
		<view class="tit">
			加热温度(℃)
		</view>
		<view class="">
			<slider :value="equipContrlForm.hst" show-value="true" :min="75" :max="120" @change="sliderChange($event,'hst')"  block-color="#57C878" activeColor="#57C878" step="1" />
		</view>
		<view class="tit">
			高温保护阈值(℃)
		</view>
		<view class=""> 
			<slider :value="equipContrlForm.tph" show-value="true" :min="50" :max="70" @change="sliderChange($event,'tph')" block-color="#57C878" activeColor="#57C878" step="1" />
		</view>
		<view class="tit">
			低温保护阈值(℃)
		</view>
		<view class="">
			<slider :value="equipContrlForm.tpl" show-value="true" :min="1" :max="10" @change="sliderChange($event,'tpl')" block-color="#57C878" activeColor="#57C878" step="1" />
		</view>
		<view class="tit">
			数据上传间隔(min)
		</view>
		<view class="">
			<slider :value="equipContrlForm.datt" show-value="true" :min="10" :max="60" @change="sliderChange($event,'datt')" block-color="#57C878" activeColor="#57C878" step="1" />
		</view>
		<view class="submit-box">
			<u-button  @click="submit" type="success">确定</u-button>
		</view>
		<u-toast ref="toast" />
		<u-popup v-model="mqttShow">
			<view class="mqtt-popup">
				<u-field
					required
					v-model="mqttConfig.muid"
					label="MQTT用户名"
					label-width="180"
				>
				</u-field>
				<u-field
					required
					v-model="mqttConfig.mpwd"
					label="MQTT密码"
					label-width="180"
				>
				</u-field>
				<u-field
					required
					v-model="mqttConfig.mpi"
					label="MQTT地址"
					label-width="180"
				>
				</u-field>
				<u-field
					required
					v-model="mqttConfig.mport"
					label="MQTT端口"
					label-width="180"
				>
				</u-field>
				<u-field
					required
					v-model="mqttConfig.mpub"
					label="上传地址"
					label-width="180"
				>
				</u-field>
				<u-field
					required
					v-model="mqttConfig.msub"
					label="下发地址"
					label-width="180"
				>
				</u-field>
				<u-field
					v-model="mqttConfig.fuid"
					label="FTP用户名"
					label-width="180"
				>
				</u-field>
				<u-field
					v-model="mqttConfig.fpwd"
					label="FTP密码"
					label-width="180"
				>
				</u-field>
				<u-field
					required
					v-model="mqttConfig.fip"
					label="图片上传地址"
					label-width="180"
				>
				</u-field>
				<u-field
					required
					v-model="mqttConfig.fport"
					label="图片上传接口"
					label-width="180"
				>
				</u-field>
			</view>
			<view class="mqtt-btn-box">
				<u-button @click="" size="medium" type="success">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				d_id:'',
				dsArr:['开机','关机'],
				dsIndex:0,
				wsArr:['待机','工作'],
				wsIndex:0,
				tsArr:['光控','时控'],
				tsIndex:0,
				imgresArr:['高','中','低'],
				imgresIndex:"",
				wsModelShow:false, 
				equipContrlForm:{
					ds:0,//设备开关
					ts:0,//定时模式
					tt:1,//定时时长
					ws:0,//工作状态
					collt: 1,
					htim: 1,
					hst: 75,
					tph: 50,
					tpl: 1,
					datt: 10,
					st: null,
					et: null,
				},
				stShow:false,
				etShow:false,
				stLabel:'00:00',
				etLabel:'00:00',
				list:[
					{
					value:0,
					label:'00:00'
					},
					{
					value:1,
					label:'01:00'
					},
					{
					value:2,
					label:'02:00'
					},
					{
					value:3,
					label:'03:00'
					},
					{
					value:4,
					label:'04:00'
					},
					{
					value:5,
					label:'05:00'
					},
					{
					value:6,
					label:'06:00'
					},
					{
					value:7,
					label:'04:00'
					},	{
					value:8,
					label:'08:00'
					},
					{
					value:9,
					label:'09:00'
					},
					{
					value:10,
					label:'10:00'
					},
					{
					value:11,
					label:'11:00'
					},
					{
					value:12,
					label:'12:00'
					},
					{
					value:13,
					label:'13:00'
					},
					{
					value:14,
					label:'14:00'
					},	{
					value:15,
					label:'15:00'
					},
					{
					value:16,
					label:'16:00'
					},
					{
					value:17,
					label:'17:00'
					},
					{
					value:18,
					label:'18:00'
					},
					{
					value:19,
					label:'19:00'
					},
					{
					value:20,
					label:'20:00'
					},
					{
					value:21,
					label:'21:00'
					},	{
					value:22,
					label:'22:00'
					},
					{
					value:23,
					label:'23:00'
					},
				],
				mqttShow:false,
				mqttConfig: {
						muid: '',
						mpwd: '',
						mip: '',
						mport: '',
						mpub: '',
						msub: '',
						fuid: '',
						fpwd: '',
						fip: '',
						fport: ''
					},
			}
		},
		onLoad(option){
			this.d_id=option.d_id
			this.getInfo()
		},
		methods: {
			turnChange(e,a){
				if(a=='ds'){
					// this.dsIndex = e.target.value
					this.equipContrlForm.ds=e.target.value 
				}else if(a=='ws'){
					// this.wsIndex = e.target.value
					this.wsModelShow=true
					this.equipContrlForm.ws=e.target.value
					
				}else if(a=='ts'){
					// this.tsIndex = e.target.value
					this.equipContrlForm.ts=e.target.value
				}
			},
			stConfirm(e){
				this.stLabel=e[0].label
				this.equipContrlForm.st=e[0].value
			},
			etConfirm(e){
				this.etLabel=e[0].label
				this.equipContrlForm.et=e[0].value
			},
			async wsConfirm(){
				console.log(222)
				const res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.device_control',
					data:{
						device_type_id:3,
						d_id:this.d_id,
						work_type: this.equipContrlForm.ws,
					}
				})
				if(res){
					this.$refs.wsToast.show({
						title: '修改成功',
						type: 'success',
					})
				}
			},
			wsCancel(){
				this.$refs.wsToast.show({
					title: '取消修改',
					type: 'default',
				})
			},
			selectTime(a){
				if(a=='st'){
					this.stShow=true;
				}else{
					this.etShow=true;
				}
			},
			sliderChange(e,a){
				let val=e.detail.value
				switch(a){
					case 'tt':
						this.equipContrlForm.tt=val;
						break;
					case 'collt':
						this.equipContrlForm.collt=val;
						break;
					case 'htim':
						this.equipContrlForm.htim=val;
						break;
					case 'hst':
						this.equipContrlForm.hst=val;
						break;
					case 'tph':
						this.equipContrlForm.tph=val;
						break;
					case 'tpl':
						this.equipContrlForm.tpl=val;
						break;
					case 'datt':
						this.equipContrlForm.datt=val;
						break;
				}
			},
			async getInfo(){
				let res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.device_control_info',
					data:{
						d_id:this.d_id,
						cmd: 'paramconf'
					}
				})
				this.stLabel =
					res.st && res.st < 10 ? '0' + res.st + ':00' : res.st + ':00'
				this.etLabel=
					res.et && res.et < 10 ? '0' + res.et + ':00' : res.et + ':00'
				this.equipContrlForm=res
			},
			async submit(){
				console.log(this.equipContrlForm)
				let res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.device_control',
					data:{
						device_type_id:3,
						d_id: this.d_id,
						config: JSON.stringify(this.equipContrlForm)
					}
				})
				if(res){
					this.$refs.toast.show({
						title: '修改成功!',
						type: 'success',
						callback:function(){
							uni.navigateBack({
								delta: 1
							});	
						}
					})
				
				}
			},
			async equipBtnControl(cmd){
				let res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.admin_device_control',
					data:{
						cmd,
						device_type_id: 3,
						d_id: this.d_id
					}
				})
				if(res){
					this.$refs.toast.show({
						title: '指令下发成功!',
						type: 'success',
					})
				}
			},
			async mqttInfo(){
				let res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.device_control_info',
					data:{
						cmd:'netconf',
						d_id: this.d_id
					}
				})
				if(res){
					let {ftp, mqtt } =res
					this.mqttConfig = {
						muid: mqtt.uid,
						mpwd: mqtt.pwd,
						mip: mqtt.ip,
						mport: mqtt.port,
						mpub: mqtt.pub,
						msub: mqtt.sub,
						fuid:ftp.uid,
						fpwd:ftp.pwd,
						fip:ftp.ip,
						fport:ftp.port
					}
				}
				this.mqttShow=true
			},
			async mqttSubm(){
					let obj = {
							mqtt: {
								uid: this.mqttConfig.muid,
								pwd: this.mqttConfig.mpwd,
								ip: this.mqttConfig.mip,
								port: this.mqttConfig.mport,
								pub: this.mqttConfig.mpub,
								sub: this.mqttConfig.msub,
								keepalive: 60,
								lastwill: '/yfkj/cbd/offline/'
							},
							ftp: {
								uid: this.mqttConfig.fuid,
								pwd: this.mqttConfig.fpwd,
								ip: this.mqttConfig.fip,
								port: this.mqttConfig.fport
							}
						}
				let res=await this.$myRequest({
					url:'/api/api_gateway?method=forecast.send_control.device_control',
					data:{
							device_type_id: 3,
							d_id: this.d_id,
							cmd: 'setnet',
							config: JSON.stringify(obj)
					}
				})		
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding:20rpx;
		box-sizing: border-box;
		.tit{
			line-height:30rpx;
			font-size:30rpx;
			padding-left:20rpx;
			border-left-width:2px;
			border-left-style: solid;
			border-left-color:$uni-color-success;
			margin:30rpx 0;
			}
		.adminTit{border-left-color:#e64340;}
		.btns{
			display:flex;
			justify-content: flex-start;
			flex-wrap:no-wrap;
			button{margin:0;margin-right:10rpx;padding:0 25rpx;}
		}
		.uni-list-cell{
			background:#F7F8FA;
			padding:10rpx 40rpx;
			font-size:28rpx;
			box-sizing: border-box;
			.arrow{
				display:inline-block;
				border-width:12rpx 8rpx ;
				border-style: solid;
				float:right;
				margin-top:10rpx;
				border-color:#888 transparent transparent transparent;
			}
		}
		.selectTime{
			display:flex;
			.time{
				width:350rpx;
				display:flex;
				justify-content: space-between;
			}
			.line{width:50rpx;text-align: center;}
		}
		.submit-box{
			margin-top:60rpx
		}
		.mqtt-popup{
			width:580rpx;
			
		}
		.mqtt-btn-box{
			margin-top:50rpx;
			text-align: center;
		}
	}
	

</style>