bigdata_WX/pages/prevention/control.vue

<template>
	<view>
		<view class="status_bar"></view>
		<view class="" style="position: relative;top: 64px;">
			<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" v-if="myuser_type">
					<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 || 0}}
						</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 || 0}}
						</view>
					</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
				},
				myuser_type: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
			uni.getStorage({
				key: "myuser_type",
				success: (res) => {
					if (Number(res.data) == 1) {
						this.myuser_type = true
					}
				}
			})
		}
	}
</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: 100rpx;

		.ensure_btn {
			width: 90%;
			margin: 0 auto;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background-color: #28AE4F;
			color: #FFFFFF;
			border-radius: 30rpx;
		}
	}
</style>