bigDataApp/pages/cb/cbd/equip-set/equip-set-sy2.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" v-if="controlInfo.forceControl.length>0">
				强制操作
			</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="">
			<view class="tit">
				IMEI：{{equipContrlForm.imei}}
			</view>
			<view class="tit">
				设备ID：{{device_id}}
			</view>
			<view class="tit">
				设备版本：{{equipContrlForm.version}}
			</view>
		</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.ctrlMode=='1'">
			<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.ctrlMode=='0'">
			<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="selectOperate(5,180,'takePhotoIntervalMinutes')">
			<span class="tit">
				拍照频率(min)
			</span>
			<view class="right-data" style="float: right;">
				<span>{{equipContrlForm.takePhotoIntervalMinutes}}</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: {
					endHour: '',
					ctrlMode: '0',
				
					startHour: '',
					takePhotoIntervalMinutes: 5,
					lightDuration:''
				},

				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: 'reboot'
        },
        {
          name: '数据单元升级',
          cmd: 'upgradeApp'
        }]
				const forceControl = [
				 //  {
					// name: '控制单元重启',
					// cmd: 'reboot'
				 //  },
				 //  {
					// name: '控制单元升级',
					// cmd: 'update'
				 //  }
				]
				const equipControl = [
				 {
				           name: '测试拍照',
				           cmd: 'takephoto'
				         },
				         {
				           name: '获取定位',
				           cmd: 'getLocation'
				         }
				]
			
				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.ctrlMode = e[0].value
			},
			gkArrConfirm(e){
				this.gkongLabel = e[0].label
				this.equipContrlForm.lightDuration = 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.startHour = e[0].value
				this.equipContrlForm.endHour = 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.tsArrLabel = res.ctrlMode=='0' ? '光控模式':'时控模式'
				this.gkongLabel = res.lightDuration + 'h'
				this.shikongLabel = res.startHour + ':00' +  ' - '+res.endHour + ':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
					}
				})
				console.log('响应',res)
				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
					}
				})
				console.log(res,'响应----')
				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>