wisdom/pages/lampControls/lampControls.vue

<template>
	<view>
		<!-- 警告提示 -->
		<u-notify ref="uNotify"></u-notify>
		<!-- 成功提示 -->
		<u-notify ref="Success"></u-notify>
		<view class="navigation">
			<scroll-view class="scrolls" scroll-x="true">
				<view v-for="(item,index) in records" :key="item.id" class="nav_item" @click="selectItem(index)"
					tabindex="1">
					{{item.poleGroupName}}
				</view>
			</scroll-view>
			<view class="lamp_data">
				<button type="primary" @click="lightDate()">数据</button>
			</view>
		</view>
		<view class="all">
			<button type="default" @click="allTactics()" style="width: 220rpx;left: 265rpx;">关联策略</button>
			<button @click="open(2)" style="left: 20rpx;" type="primary">全开</button>
			<button @click="shut(2)" style="right: 20rpx;" type="warn">全关</button>
		</view>
		<view class="list">
			<view v-for="(item2,index2) in tworacords" :key="item2.id" class="list_data">
				<image :src="item2.lightControlState == '2' ? imageAddress + '/lamp.png' : imageAddress + '/lamp1.png'">
				</image>
				<text>{{item2.publicName}}</text>
				<button type="default" @click="allTactics(item2.publicName,item2.publicId,1,item2.lightName)"
					style="right: 220rpx; width: 120rpx;">策略</button>
				<button type="primary" @click="open(1,item2.publicId,item2.publicName,index2)"
					style="right: 120rpx;">开</button>
				<button type="warn" @click="shut(1,item2.publicId,item2.publicName,index2)"
					style="right: 20rpx;">关</button>
			</view>
			<!-- 开启控制 -->
			<u-popup :show="openShow" mode="center" duration="0">
				<view class="openPopup">
					<view class="openText">
						开灯控制
					</view>
					<view class="openTime">
						<select-lay slabel="label" :options="openlist" placeholder="开启时长" :value="openTime"
							@selectitem="modify" class="select-lay">
						</select-lay>
					</view>
					<view class="brightness">
						开灯亮度:{{duration}}%
						<slider @change="durationChange" :value="duration" min="1" max="100">
						</slider>
					</view>
					<view class="remarks">
						<input placeholder="请输入备注(可不填)" @input="openlightControl" :value="openRemarks" type="text" />
					</view>
					<view class="send">
						<view style="width: 200rpx;">
							<u-button @click="openShow = false">取消</u-button>
						</view>
						<view style="width: 200rpx;margin-left: 100rpx;">
							<u-button type="primary" @click="distinguish.opensh == 1?
								openControl(1,1):openControl(1,2)">
								确定</u-button>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 关闭控制 -->
			<u-popup :show="shutShow" mode="center" duration="0">
				<view class="openPopup" style="height: 500rpx;">
					<view class="openText">
						关灯控制
					</view>
					<view class="openTime">
						<select-lay slabel="label" :options="shutlist" placeholder="关闭时长" :value="shutTime"
							@selectitem="shutModify" class="select-lay">
						</select-lay>
					</view>
					<view class="remarks">
						<input placeholder="请输入备注(可不填)" @input="shutlightControl" :value="shutRemarks" type="text" />
					</view>
					<view class="send">
						<view style="width: 200rpx;">
							<u-button @click="shutShow = false">取消</u-button>
						</view>
						<view style="width: 200rpx;margin-left: 100rpx;">
							<u-button type="primary" @click="distinguish.opensh == 1?
								shutControl(2,1):shutControl(2,2)">
								确定</u-button>
						</view>
					</view>
				</view>

			</u-popup>
		</view>
		<view class="pagination">
			<uni-pagination :total="page.total" :pageSize="page.pageSize" :current="page.current" @change="pageTatble"
				style="width: 750rpx;
				height: 150rpx;">
			</uni-pagination>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		grouplist,
		list,
		Control,
		light
	} from '@/pages/api/lighting/lighting.js'
	export default {
		data() {
			return {
				page: {
					total: 80, //数据总量
					pageSize: 10, //每页的数据量
					current: 1, //当前页数
					thrifty: false, //节流阀
				},
				openShow: false,
				shutShow: false,
				openlist: [{
						label: '1分钟',
						value: 1
					},
					{
						label: '2分钟',
						value: 2
					},
					{
						label: '3分钟',
						value: 3
					},
					{
						label: '5分钟',
						value: 5
					},
					{
						label: '10分钟',
						value: 10
					},
					{
						label: '20分钟',
						value: 20
					},
					{
						label: '30分钟',
						value: 30
					},
					{
						label: '1小时',
						value: 60
					},
					{
						label: '2小时',
						value: 120
					},
					{
						label: '3小时',
						value: 180
					},
					{
						label: '5小时',
						value: 300
					},
					{
						label: '8小时',
						value: 480
					},
				],
				shutlist: [{
						label: '1分钟',
						value: 1
					},
					{
						label: '2分钟',
						value: 2
					},
					{
						label: '3分钟',
						value: 3
					},
					{
						label: '5分钟',
						value: 5
					},
					{
						label: '10分钟',
						value: 10
					},
					{
						label: '20分钟',
						value: 20
					},
					{
						label: '30分钟',
						value: 30
					},
					{
						label: '1小时',
						value: 60
					},
					{
						label: '2小时',
						value: 120
					},
					{
						label: '3小时',
						value: 180
					},
					{
						label: '5小时',
						value: 300
					},
					{
						label: '8小时',
						value: 480
					},
				],
				openTime: '', //开启时长
				shutTime: '', //关闭时长
				duration: '1', //开灯亮度
				openRemarks: '', //开灯备注
				shutRemarks: '', //关灯备注
				records: [],
				tworacords: [],
				topItem: '',
				//分组信息
				divide: {
					publicId: 0,
					publicName: '',
					groupIndex: 0, //当前的分组下标
				},
				//设备信息
				device: {
					publicId: '',
					publicName: '',
					index2: 0
				},
				//区分单个和多个开关控制
				distinguish: {
					opensh: 1,
					shutsh: 1,
				},
				imageAddress: 'https://cloud.long-chi.com/resource/miniprogram-lightcontrol/image',
				//定时器id
				timerId:'',
				permit:true
			}
		},
		onLoad() {
			this.load()
		},
		onShow() {
			var that = this
			setTimeout(function(){
				var permit = that.permit
				//通过vuex中储存的quantity来记录执行的次数，以确保在第一次执行时不执行onshow中的方法
				var token = uni.getStorageSync('token')
				that.$store.commit('changeQuan',1)
				var quantity = that.$store.state.quantity
				//permit为true表示数据尚未加载成功，此时定时器尚未打开,
				//为false表示定时器打开过，但此时由于页面隐藏关闭了定时器，所以再次显示时重新打开
				if(quantity != 1){
					permit == true && token != ''? that.load() : that.timerId = setInterval(that.renovate,15000)
				}
			},1000)
		},
		onHide() {
			var that = this
			var permit = that.permit
			//在确保定时器打开且页面隐藏时关闭定时器
			if(permit == false){
				clearInterval(this.timerId)
			}
		},
		methods: {
			load() {
				const current = this.page.current
				const pageSize = this.page.pageSize
				var records = []
				grouplist().then(get => {
					if (get.code == 200) {
						this.records = get.data
						records = get.data
						list(records[0].id, current, pageSize).then(res => {
							if (res.code == 200) {
								let children = res.data.records[0].children
								this.page.total = res.data.total
								this.tworacords = children
								this.divide.publicId = records[0].id
								this.divide.publicName = records[0].poleGroupName
								this.timerId = setInterval(this.renovate,15000)
								this.permit = false
							}
						})
					}
				})
			},
			//过度动画
			cartoon(title, duration) {
				uni.showToast({
					title: title,
					icon: 'loading',
					duration: duration
				})
			},
			//切换分组
			selectItem(index) {
				var records = this.records
				let pageSize = this.page.pageSize
				let current = 1
				this.divide.groupIndex = index
				this.divide.publicId = records[index].id
				this.divide.publicName = records[index].poleGroupName
				list(records[index].id, current, pageSize).then(res => {
					if (res.code == 200) {
						this.tworacords = res.data.records[0].children
						this.page.current = 1
						this.page.total = res.data.total
					}
				})
			},
			open(ever, publicId, publicName, index2) {
				this.distinguish.opensh = ever
				if (ever == 1) {
					this.device.publicId = publicId
					this.device.publicName = publicName
					this.device.index2 = index2
				}
				this.openShow = true
			},
			shut(ever, publicId, publicName, index2) {
				this.distinguish.shutsh = ever
				if (ever == 1) {
					this.device.publicId = publicId
					this.device.publicName = publicName
					this.device.index2 = index2
				}
				this.shutShow = true
			},
			modify(index, item) {
				this.openTime = index >= 0 ? item.value : ''
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			//时长未选择报错
			exError() {
				this.$refs.uNotify.show({
					top: 10,
					type: 'error',
					color: '#ffffff',
					bgColor: '#f56c6c',
					message: '请选择时长',
					duration: 1500,
					fontSize: 15,
				})
			},
			Success(message) {
				this.$refs.Success.show({
					top: 10,
					type: 'success',
					color: '#ffffff',
					message: message,
					duration: 1500,
					fontSize: 15,
				})
			},
			//开启
			openControl(handSwitch, handType) {
				var that = this
				const openTime = that.openTime
				const duration = that.duration
				const openRemarks = that.openRemarks
				var opensh = that.distinguish.opensh
				var tworacords = that.tworacords
				var tworacords = []
				if (openTime == '') {
					that.exError()
				} else {
					var publicId = 0
					var publicName = ''
					if (opensh == 1) {
						publicId = that.device.publicId
						publicName = that.device.publicName
					} else {
						publicId = that.divide.publicId
						publicName = that.divide.publicName
					}
					//handSwitch(开启:1,关闭:2)
					//handType(开/关:1,全开/全关:2)
					//publicId(分组/设备的id)
					//openTime(开启时间)
					//duration(光照度)
					//openRemarks(备注)
					//publicName(分组/设备名称)
					Control(handSwitch, handType, publicId, openTime, duration, openRemarks, publicName).then(res => {
						if (res.code == 200) {
							that.Success('开灯成功')
						}
					})
				}
			},
			shutModify(index, item) {
				this.shutTime = index >= 0 ? item.value : ''
			},
			//关闭
			shutControl(handSwitch, handType) {
				var that = this
				const shutTime = that.shutTime
				const shutRemarks = that.shutRemarks
				var tworacords = that.tworacords
				var index2 = that.device.index2
				var shutsh = that.distinguish.shutsh
				if (shutTime == '') {
					that.exError()
				} else {
					var publicId = 0
					var publicName = ''
					if (shutsh == 1) {
						publicId = that.device.publicId
						publicName = that.device.publicName

					} else {
						publicId = that.divide.publicId
						publicName = that.divide.publicName
					}
					Control(handSwitch, handType, publicId, shutTime, 0, shutRemarks, publicName).then(res => {
						if (res.code == 200) {
							that.Success('关灯成功')
						}
					})
				}
			},
			//获取输入的值(开启备注)
			openlightControl(e) {
				this.openRemarks = e.detail.value
			},
			//获取输入的值(关闭备注)
			shutlightControl(e) {
				this.shutRemarks = e.detail.value
			},
			//关联策略
			allTactics(publicName, publicId, relationType, lightName) {
				uni.navigateTo({
					url: '/pages/Tactics/Tactics?publicName=' + publicName + '&publicId=' + publicId +
						'&relationType=' + relationType + '&lightName=' + lightName
				})
			},
			lightDate() {
				uni.navigateTo({
					url: '/pages/Lighting_data/Lighting_data'
				})
			},
			//分页器页数改变
			pageTatble(e) {
				var that = this
				that.cartoon('加载中',1000)
				var publicId = that.divide.publicId
				var pageSize = that.page.pageSize
				that.page.current = e.current
				list(publicId, e.current, pageSize).then(res => {
					if (res.code == 200) {
						that.tworacords = res.data.records[0].children
					}
				})
			},
			//定时刷新
			renovate(){
				var that = this
				var publicId = that.divide.publicId
				var current = that.page.current
				var pageSize = that.page.pageSize
				list(publicId,current,pageSize).then(res => {
					if(res.code == 200){
						that.tworacords = res.data.records[0].children
					}
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	.navigation {
		width: 750rpx;
		height: 120rpx;
		border-bottom: 1px solid royalblue;
		display: flex;
	}

	.scrolls {
		white-space: nowrap; // 滚动必须加的属性
		width: 80%;
		height: 120rpx;
		line-height: 120rpx;
		background-color: #363535;
	}

	.nav_item {
		height: 120rpx;
		display: inline-block;
		text-align: center;
		line-height: 120rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		font-size: 36rpx;
		color: #ffffff;
		background-color: #363535;

		&:focus {
			background-color: #474747;
		}
	}

	.list {
		width: 750rpx;
	}


	.list_data {
		width: 100%;
		height: 100rpx;
		position: relative;
		border-bottom: 1px solid #363535;

		text {
			font-size: 32rpx;
			position: absolute;
			top: 34rpx;
			left: 110rpx;
		}

		image {
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 15rpx;
			left: 20rpx;
		}

		button {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 15rpx;
			font-size: 30rpx;
		}
	}

	.all {
		width: 750rpx;
		height: 100rpx;
		border-bottom: 1px solid #363535;
		position: relative;

		button {
			width: 140rpx;
			height: 80rpx;
			font-size: 30rpx;
			position: absolute;
			top: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.openPopup {
		width: 600rpx;
		height: 700rpx;
		background-color: #ffffff;
	}

	.openText {
		width: 100%;
		height: 120rpx;
		font-size: 40rpx;
		font-weight: 550px;
		text-align: center;
		line-height: 120rpx;
	}


	.openTime {
		width: 500rpx;
		height: 70rpx;
		margin: 0 auto;
		text-align: center;
		font-size: 30rpx;
	}

	.brightness {
		width: 500rpx;
		height: 120rpx;
		margin: 60rpx auto;
		display: flex;
		flex-direction: column;
		text-align: center;
		font-size: 32rpx;
	}

	.remarks {
		width: 500rpx;
		height: 80rpx;
		margin: 60rpx auto;
	}

	.remarks input {
		width: 100%;
		height: 100%;
		border: 1px solid #eaeaea;
		font-size: 30rpx;
	}

	.send {
		width: 500rpx;
		height: 80rpx;
		margin: 60rpx auto;
		font-size: 30rpx;
		display: flex;
	}

	.lightDate {
		width: 100%;
		height: 100rpx;
		position: relative;
		border-bottom: 1px #d2cece solid;

		button {
			width: 200rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			position: absolute;
			top: 10rpx;
			left: 20rpx;
		}
	}

	.lamp_data {
		width: 20%;
		height: 100%;

		button {
			width: 100%;
			height: 100%;
			border-radius: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
		}
	}

	.pagination {
		width: 750rpx;
		height: 80rpx;
		margin-top: 40rpx;
	}
</style>