bigDataApp/pages/prevention/control.vue

<template>
	<view>
		<view style="position: fixed;z-index: 100;width: 100%;">
			<uni-nav-bar @clickLeft="clickLeft" left-icon="back" left-text="返回" title="设备控制"></uni-nav-bar>
		</view>
		<view class="control">
			<view class="control_restart">
				<p class="title_p">管理员操作</p>
				<view class="control_restart_but">
					<button @click="restart">重启</button>
					<button @click="upgrade">升级</button>
				</view>
			</view>
			<view class="control_off">
				<p class="title_p">设备开关</p>
				<view class="control_off_off">
					<p>{{condatas.ds == 1? "开机":"关机"}}</p>
					<u-switch v-model="checked1" size="30" style="margin-top: 14rpx;" active-color="#58C876" @change="checkedTF"></u-switch>
				</view>
			</view>
			<view class="control_mo">
				<p class="title_p">定时模式</p>
				<view class="control_off_off" @click="show1 = !show1">
					<p>{{condatas.timctrl==1 ? "时控":"光控"}}</p>
					<u-icon name="arrow-down-fill" size="12" color="#7F8082"></u-icon>
				</view>
				<u-action-sheet :list="options1" v-model="show1" @click="actionSheetCallback"></u-action-sheet>
			</view>
			<view class="control_time" v-if="condatas.timctrl== 0">
				<p class="title_p">定时时长(h)</p>
				<view class="control_off_off" @click="show2 = !show2">
					<p>{{condatas.tt==0?'常亮':condatas.tt}}</p>
					<u-icon name="arrow-down-fill" size="12" color="#7F8082"></u-icon>
				</view>
			</view>
			<view class="control_time" v-else>
				<p class="title_p">开始结束时间</p>
				<view class="control_off_off" @click="show3 = !show3">
					<p>开始时间：{{condatas.st}}:00</p>
					<u-picker v-model="show3" mode="time" :params="params" @confirm="confirmFun"></u-picker>
					<u-icon name="arrow-down-fill" size="12" color="#7F8082"></u-icon>
				</view>
				<view class="control_off_off" @click="show4 = !show4">
					<p>结束时间：{{condatas.et}}:00</p>
					<u-picker v-model="show4" mode="time" :params="params" @confirm="confirmFun2"></u-picker>
					<u-icon name="arrow-down-fill" size="12" color="#7F8082"></u-icon>
				</view>
			</view>
			<view class="control_interval">
				<p class="title_p">上传时间间隔(min)</p>
				<view class="slider">
					<view class="" style="width: 90%;padding-top: 18rpx;">
						<u-slider v-model="condatas.dattim" min="0" max="100" step="1" active-color="#58C876"></u-slider>
					</view>
					<view class="" style="width: 10%;text-align: center;">
						{{condatas.dattim}}
					</view>
				</view>
			</view>
			<view class="control_timing">
				<p class="title_p">自清虫定时(min)</p>
				<view class="slider">
					<view class="" style="width: 90%;padding-top: 18rpx;">
						<u-slider v-model="condatas.clt" min="0" max="100" step="1" active-color="#58C876"></u-slider>
					</view>
					<view class="" style="width: 10%;text-align: center;">
						{{condatas.clt}}
					</view>
				</view>
			</view>
		</view>
		<view class="ensure">
			<view class="ensure_btn" @click="ensure">
				确 定
			</view>
		</view>
		<u-popup v-model="show2" mode="bottom" length="30%" class="pop-up">
			<scroll-view scroll-y="true" class="sheet">
				<view class="sheet-text" v-for="(item,index) in options2" :key="index">
					<p @click="typesofroles(index)">{{item.text}}</p>
				</view>
			</scroll-view>
			<button @click="show2 = false">取消</button>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				condatas: {},
				checked1: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				options1: [{
						text: '光控'
					},
					{
						text: '时控'
					}
				],
				options2: [{
						text: '常亮'
					},
					{
						text: '1'
					},
					{
						text: '2'
					},
					{
						text: '3'
					},
					{
						text: '4'
					},
					{
						text: '5'
					},
					{
						text: '6'
					},
					{
						text: '7'
					},
					{
						text: '8'
					},
					{
						text: '9'
					},
					{
						text: '10'
					},
					{
						text: '00'
					}
				],
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: false,
					second: false
				},
			}
		},
		methods: { //forecast.send_control.device_control_info
			async controldata(data) { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.send_control.device_control_info',
					data: {
						d_id: data,
						cmd: 'paramconf'
					}
				})
				console.log(res)
				this.condatas = res
				if (this.condatas.ds == 1) {
					this.checked1 = true
				} else {
					this.checked1 = false
				}
			},
			//forecast.send_control.admin_device_control
			async reorup(data) { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.send_control.admin_device_control',
					data: {
						d_id: data.d_id,
						device_type_id:2,
						cmd: data.cmd
					}
				})
				if(res == true){
					uni.showToast({
					    title: '指令下发成功!'
					});
				}else{
					uni.showToast({
					    title: '指令下发失败!'
					});
				}
			},
			//forecast.send_control.device_control
			async controlby(data) { //设备列表
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=forecast.send_control.device_control',
					data: {
						d_id: this.d_id,
						device_type_id:2,
						config: data
					}
				})
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			typesofroles(index) {
				this.condatas.tt = index
				this.show2 = false
			},
			actionSheetCallback(index) {
				this.condatas.timctrl = index
			},
			checkedTF(e) { //设备开关
				if (e == true) {
					this.condatas.ds = 1
				} else {
					this.condatas.ds = 0
				}
			},
			confirmFun(e){//开始时间
				this.condatas.st = Number(e.hour)
			},
			confirmFun2(e){//结束时间
				this.condatas.et = Number(e.hour)
			},
			restart(){//重启
				let obj = {
					d_id:this.d_id,
					cmd:'reboot'
				}
				this.reorup(obj)
			},
			upgrade(){//升级
				let obj = {
					d_id:this.d_id,
					cmd:'update'
				}
				this.reorup(obj)
			},
			ensure(){ 
				let str = JSON.stringify(this.condatas)
				console.log(str)
				this.controlby(str)
				this.clickLeft()
			}
		},
		onLoad(option) {
			this.$forceUpdate()
			this.controldata(option.id)
			this.d_id = option.id
		}
	}
</script>

<style lang="scss">
	.control {
		position: absolute;
		top: 50px;
		width: 90%;
		left: 5%;

		.title_p {
			padding-left: 20rpx;
			border-left: 6rpx solid #28AE4F;
			height: 40rpx;
			margin-bottom: 20rpx;
		}

		.control_off_off {
			display: flex;
			justify-content: space-between;
			margin-left: 24rpx;
			padding: 0 30rpx;
			background-color: #F7F8FA;
			height: 60rpx;
			line-height: 60rpx;
			margin-bottom: 20rpx;
		}

		.slider {
			display: flex;
			padding: 0 30rpx 0 0;
			margin-left: 24rpx;
			margin-bottom: 20rpx;
		}

		.control_restart {
			margin-bottom: 20rpx;

			.title_p {
				border-left: 6rpx solid #D17978;
			}

			.control_restart_but {
				display: flex;
				justify-content: flex-start;
				margin-left: 24rpx;

				button {
					width: 110rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 26rpx;
					margin: 0 20rpx 0 0;
					color: #FFFFFF;
					background-color: #D17978;
				}
			}
		}

		.control_off {}
	}

	.pop-up {
		.sheet {
			background-color: white;
			height: 400rpx;
			overflow: hidden;

			.sheet-text {
				height: 80rpx;
				border-bottom: 2rpx solid #F7F8FA;

				p {
					text-align: center;
					height: 80rpx;
					line-height: 80rpx;
					color: black;
					font-size: 16px;
				}
			}
		}

		button {
			color: black;
			position: absolute;
			bottom: 0;
			width: 100%;
			font-size: 16px;
			height: 80rpx;
		}
	}
	.ensure{
		width: 100%;
		position: absolute;
		bottom: 30rpx;
		.ensure_btn{
			width: 90%;
			margin: 0 auto;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #28AE4F;
			color: #FFFFFF;
			border-radius: 30rpx;
		}
	}
</style>