bigdata_WX/pages/cb/cbd/equip-set/equip-set-new.vue

<template>
	<view style="padding: 0 24rpx;">
		<view class="" v-if="myuser_type">
			<view class="tit adminTit">
				联网模块
			</view>
			<view class="btns">
				<button v-for="(item,index) in controlInfo.netControl" type="warn" @click="equipBtnControl(item.cmd)" size="mini">{{item.name}}</button>
			</view>
			<view class="tit adminTit">
				强制操作
			</view>
			<view class="btns">
				<button v-for="(item,index) in controlInfo.forceControl" type="warn" @click="equipBtnControl(item.cmd)" size="mini">{{item.name}}</button>
		
			</view>
			<view class="tit adminTit">
				设备操作
			</view>
			<view class="btns">
				<button v-for="(item,index) in controlInfo.equipControl" type="warn" @click="equipBtnControl(item.cmd)" size="mini">{{item.name}}</button>

			</view>
		</view>
		<view style="margin:40rpx 0 20rpx 0;">
			<u-line color="#E5EBE9" />
		</view>

		<view class="uni-list-cell" v-if="device_type==32" @click="modeShow = true">
			<span class="tit">定时模式</span>
			<view class="right-data" style="float: right;">
				<span>{{tsArrLabel}}</span>
				<u-icon class="arrow" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="uni-list-cell" v-if="device_type==33||device_type==34" @click="syModeShow = true">
			<span class="tit">控制模式</span>
			<view class="right-data" style="float: right;">
				<span>{{tsArrLabel}}</span>
				<u-icon class="arrow" name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="uni-list-cell" @click="shikongshow = true" v-if="equipContrlForm.CONTROL==0">
			<span class="tit">
				时控时长
			</span>
			<view class="right-data" style="float: right;">
				<span>{{shikongLabel}}</span>
				<u-icon class="arrow" name="arrow-right"></u-icon>
			</view>
			
		</view>
		<view class="uni-list-cell" @click="gkongShow = true" v-if="equipContrlForm.CONTROL==1">
			<span class="tit">
				光控时长
			</span>
			<view class="right-data" style="float: right;">
				<span>{{gkongLabel}}</span>
				<u-icon class="arrow" name="arrow-right"></u-icon>
			</view>
			
		</view>
		
		<view class="uni-list-cell" @click="photoShow = true" v-if="device_type==33||device_type==34">
			<span class="tit">
				拍照时间
			</span>
			<view class="right-data" style="float: right;">
				<span>{{photoLabel}}</span>
				<u-icon class="arrow" name="arrow-right"></u-icon>
			</view>
			
		</view>
		<view class="uni-list-cell" v-if="device_type==33||device_type==34"  @click="selectOperate(5,1440,'P_DATT')">
			<span class="tit">
				拍照频率(min)
			</span>
			<view class="right-data" style="float: right;">
				<span>{{equipContrlForm.P_DATT}}</span>
				<u-icon class="arrow" name="arrow-right"></u-icon>
			</view>
			
		</view>
		<view class="uni-list-cell" @click="selectOperate(5,device_type==32?60:1440,'DATT')">
			<span class="tit">
				数据上传频率(min)
			</span>
			<view class="right-data" style="float: right;">
				<span>{{equipContrlForm.DATT}}</span>
				<u-icon class="arrow" name="arrow-right"></u-icon>
			</view>
			
		</view>
		<view v-if="device_type==32" class="uni-list-cell" @click="selectOperate(5,180,'PHO_T')">
			<span class="tit">
				照片上传频率(min)
			</span>
			<view class="right-data" style="float: right;">
				<span>{{equipContrlForm.PHO_T}}</span>
				<u-icon class="arrow" name="arrow-right"></u-icon>
			</view>
			
		</view>
		<view >
			<u-select v-model="modeShow" :list="tsArr" @confirm="tsArrConfirm"></u-select>
			<u-select v-model="syModeShow" :list="syArr" @confirm="tsArrConfirm"></u-select>
			<u-select v-model="shikongshow" mode="mutil-column" :list="shikonglist" @confirm="shikongconfirm"></u-select>
			<u-select v-model="photoShow" mode="mutil-column" :list="shikonglist" @confirm="photoConfirm"></u-select>
			<u-select v-model="gkongShow" :list="gkongArr" @confirm="gkArrConfirm"></u-select>
			<u-select v-model="dataSelectShow"  :list="singleSelectList" @confirm="dataconfirm"></u-select>
		</view>
		<view class="submit-box">
			<u-button :custom-style="customStyle" @click="submit" :disabled="submitBtnDisabled" >确定</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: '',
				device_id:'',
				device_type:'',
				dsArr: ['关机', '开机'],
				dsIndex: 0,
				wsArr: ['待机', '工作'],
				wsIndex: 0,
				tsArr: [ 
					{ value: 1, label: '时控触发' },
					{ value: 0, label: '时控模式' },
				],
				syArr:[
					{ value: 1, label: '光控模式' },
					{ value: 0, label: '时控模式' }
				  ],
				tsIndex: 0,
				imgresArr: ['高', '中', '低'],
				imgresIndex: "",
				wsModelShow: false,
				equipContrlForm: {
					END_TIME: '',
					CONTROL: 0,
					DATT: 5,
					START_TIME: '',
					PHO_T: 5,
					P_DATT:1,
					TT: '',
					P_START:'',
					P_END:''
				},

				shikongLabel:'00:00-00:00',
				list: [{
						value: '00:00',
						label: '00:00'
					},
					{
						value: '01:00',
						label: '01:00'
					},
					{
						value: '02:00',
						label: '02:00'
					},
					{
						value: '03:00',
						label: '03:00'
					},
					{
						value: '04:00',
						label: '04:00'
					},
					{
						value: '05:00',
						label: '05:00'
					},
					{
						value: '06:00',
						label: '06:00'
					},
					{
						value: '07:00',
						label: '07:00'
					}, {
						value: '08:00',
						label: '08:00'
					},
					{
						value: '09:00',
						label: '09:00'
					},
					{
						value: '10:00',
						label: '10:00'
					},
					{
						value: '11:00',
						label: '11:00'
					},
					{
						value:'12:00',
						label: '12:00'
					},
					{
						value: '13:00',
						label: '13:00'
					},
					{
						value: '14:00',
						label: '14:00'
					}, {
						value: '15:00',
						label: '15:00'
					},
					{
						value: '16:00',
						label: '16:00'
					},
					{
						value: '17:00',
						label: '17:00'
					},
					{
						value: '18:00',
						label: '18:00'
					},
					{
						value: '19:00',
						label: '19:00'
					},
					{
						value: '20:00',
						label: '20:00'
					},
					{
						value: '21:00',
						label: '21:00'
					}, {
						value: '22:00',
						label: '22:00'
					},
					{
						value: '23:00',
						label: '23:00'
					},
				],
				mqttShow: false,
				shikongshow:false,
				gkongLabel:'0h',
				gkongShow:false,
				mqttConfig: {
					muid: '',
					mpwd: '',
					mip: '',
					mport: '',
					mpub: '',
					msub: '',
					fuid: '',
					fpwd: '',
					fip: '',
					fport: ''
				},
				myuser_type: false,
				singleSelectList:[],
				dataSelectShow:false,
				currentFormKey:'',
				tsArrLabel:'时控模式',
			
				modeShow:false,
				syModeShow:false,
				submitBtnDisabled:false,
				photoShow:false,
				photoLabel:'00:00-00:00'
				
			}
		},
		
		computed:{
			gkongArr(){
				const list = []
				      const count = 24
				      for (let i = 0; i < count; i++) {
				        list.push({
				          value: i + 1 + '',
				          label: i + 1 + 'h'
				        })
				      }
				      return list
			},
			customStyle(){
				return {
					background: '#14A478',
					borderRadius:'90rpx',
					border:'none',
					color:'#fff'
				}
			},
			shikonglist(){
				return[
					[...this.list],
					[...this.list]
				] 
			},

			controlInfo(){
				const netControl = [{
					name: '数据单元重启',
					cmd: 'dtu_reboot'
				  },
				  {
					name: '数据单元升级',
					cmd: 'dtu_update'
				  }]
				const forceControl = [
				  {
					name: '控制单元重启',
					cmd: 'reboot'
				  },
				  {
					name: '控制单元升级',
					cmd: 'update'
				  }
				]
				const equipControl = [
				  {
					name: '开启补光灯',
					cmd: 'led_on'
				  },
				  {
					name: '关闭补光灯',
					cmd: 'led_off'
				  },
				  {
					name: '测试拍照',
					cmd: 'takephoto'
				  },
				  {
					name: '翻版测试',
					cmd: 'FB_Test'
				  }
				]
			
				switch (this.device_type){
					case 32://天牛
						break;
					case 33:
						break;
					case 34:
						break;
					case 35:
					break;
					default:
						break;
				}
				return {
					netControl,forceControl,equipControl
					
				}
			}
		},
		onLoad(option) {
			this.d_id = option.d_id
			this.device_id = option.device_id
			this.device_type = option.device_type
			this.getInfo()
			uni.getStorage({
				key: "myuser_type",
				success: (res) => {
					if (Number(res.data) == 1) {
						this.myuser_type = true
					}
				}
			})
		},
		methods: {
			selectOperate(min,max,formKey){
				this.dataSelectShow = true
		
				this.singleSelectList = []
				for (let i = min; i < max; i+=5) {
					this.singleSelectList.push({
						value:i,
						label:i.toString()
					})
				}
				console.log(this.singleSelectList,'--')
				this.currentFormKey = formKey
			},
			tsArrConfirm(e){
				this.tsArrLabel = e[0].label
				this.equipContrlForm.CONTROL = e[0].value
			},
			gkArrConfirm(e){
				this.gkongLabel = e[0].label
				this.equipContrlForm.TT = e[0].value
			},
			dataconfirm(e){
				this.equipContrlForm[this.currentFormKey] = e[0].value
			},
			shikongconfirm(e){
				console.log(e)
				this.shikongLabel = e[0].label+'-'+e[1].label
				this.equipContrlForm.START_TIME = e[0].value
				this.equipContrlForm.END_TIME = e[1].value
			},
			photoConfirm(e){
				
				this.photoLabel = e[0].label+'-'+e[1].label
				this.equipContrlForm.P_START = e[0].value
				this.equipContrlForm.P_END = e[1].value
			},
			turnChange(e, a) {
				this.equipContrlForm.ts = e.target.value

			},	
			async getInfo() {
				let res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.device_info.get_device_config',
					data: {
						device_type_id:this.device_type,
						id: this.d_id
					}
				})
				if(res.code==4000){
					this.submitBtnDisabled = true
					this.$refs.toast.show({
						title: res.msg,
						type: 'warning'
					})
					return 
				}
				this.equipContrlForm = res
				this.photoLabel = (res.P_START||'00:00')+' - '+ (res.P_END||'00:00')
				this.shikongLabel = res.START_TIME + ':00' +  ' - '+res.END_TIME + ':00' 
				console.log(this.equipContrlForm)
			},
			async submit() {
				console.log(this.equipContrlForm)
				let res = await this.$myRequest({
					url: '/api/api_gateway?method=new_gateway.device_info.update_device_config',
					data: {
						device_type_id: this.device_type,
						id: this.d_id,
						...this.equipContrlForm
						
					}
				})
				if(res){
					this.$refs.toast.show({
						title: '修改成功!',
						type: 'success',
					})
				}
				if(res.code==4000){
					this.$refs.toast.show({
						title: res.msg+'无法修改',
						type: 'warning'
					})
					
				}
			},
			async equipBtnControl(cmd) {
				let res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
					data: {
						cmd,
						device_type_id: this.device_type,
						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" scoped>
	page {
		padding: 20rpx;
		box-sizing: border-box;

		.tit {
			line-height: 30rpx;
			font-size: 28rpx;
			margin: 30rpx 0;
			color: #666666;
		}

		.adminTit {
			border-left-color: #e64340;
		}

		.btns {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			gap: 16rpx;
			button {
				margin: 0;
				margin-right: 10rpx;
				padding: 0 25rpx;
			}
		}

		.uni-list-cell {
			// background: #F7F8FA;
			// padding: 10rpx 40rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			.arrow{
				margin-left: 30rpx;
			}
			.right-data{
				color: #CCCCCC;
			}
		}

		.selectTime {
			display: flex;
			float: right;
			width: 30%;
			color: #CCCCCC;
			justify-content: space-between;
			.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>