wszhyWx/pages/controller/controller.vue

<template>
	<view class="controller">
		<u-navbar :background="background" :is-back='true' back-icon-color='#FFFFFF' :border-bottom="false" title="控制器"
			title-color='#FFFFFF' :title-bold='true' title-size='32'></u-navbar>

		<view class="content">
			<div class="item">
				<u-collapse :item-style="itemStyle" :head-style='headStyle'>
					<u-collapse-item :title="item.head" v-for="(item,index) in itemList" :key="index" align="center">
						<view class="collapseItem">
							<view class="line"></view>
							<view class="control_model">
								<view class="control">
									控制模式:
								</view>
								<view class="model">
									<text @click="change00(item.type,1)"
										:class="getTypeRoll(item.type)==1?'txt_act':'txt'">打&nbsp;&nbsp;&nbsp;开</text>
									<text @click="change00(item.type,2)"
										:class="getTypeRoll(item.type)==2?'txt_act':'txt'">停&nbsp;&nbsp;&nbsp;止</text>
									<text @click="change00(item.type,3)"
										:class="getTypeRoll(item.type)==3?'txt_act':'txt'">关&nbsp;&nbsp;&nbsp;闭</text>
								</view>
								<view class="line1"></view>
								<view class="roll_input">
									<view class="">
										<view class="">
											<input v-model="item.open_value" @blur="blurChangeData00_1(item.type+1,$event)" type="number"
												placeholder="0">
										</view>
										<text>通道打开;</text>
									</view>
									<view class="">
										<view class="">
											<input v-model="item.close_value" @blur="blurChangeData00_2(item.type+2,$event)" type="number"
												placeholder="0">
										</view>
										<text>通道关闭</text>
									</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头部导航背景
				background: {
					backgroundColor: '#24B383',
				},
				deviceId: '',

				itemList: [{
					head: "1#顶卷膜",
					type: 21680,
					open_value:0,
					close_value:0
				}, {
					head: "2#顶卷膜",
					type: 21683,
					open_value:0,
					close_value:0
				}, {
					head: "3#顶卷膜",
					type: 21686,
					open_value:0,
					close_value:0
				}, {
					head: "1#侧卷膜",
					type: 21689,
					open_value:0,
					close_value:0
				}, {
					head: "2#侧卷膜",
					type: 21692,
					open_value:0,
					close_value:0
				}, ],
				itemStyle: {
					width: "690rpx",
					background: " #FFFFFF",
					boxShadow: "0rpx 4rpx 20rpx 0rpx rgba(153,153,153,0.1)",
					borderRadius: "20rpx",
					marginBottom: '30rpx',

				},
				headStyle: {
					fontSize: "30rpx",
					fontFamily: "PingFang-SC-Bold",
					fontWeight: "bold",
					color: "#333333",
					height: '91rpx'
				},
				txt_act21680: 0,
				txt_act21683: 0,
				txt_act21686: 0,
				txt_act21689: 0,
				txt_act21692: 0,
				inputData: [],
				inputData1: [],
				timer: '',

				
			};
		},
		onLoad(options) {
			if (options.id) {
				this.deviceId = options.id;
			}

			this.dataInit()
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中...'
			})
			this.dataInit();
		},
		methods: {
			// 根据type参数返回对应的txt_act21680
			getTypeRoll(i){
				if(i == 21680){
					return this.txt_act21680
				}else if(i == 21683){
					return this.txt_act21683
				}else if(i == 21686){
					return this.txt_act21686
				}else if(i == 21689){
					return this.txt_act21689
				}else if(i == 21692){
					return this.txt_act21692
				}
			},
			
			
			// 读取所有寄存器的状态值
			dataInit() {
				var deviceId = this.deviceId
				this.$http({
					url: this.api.readJinHuaControl_reg + '?deviceId=' + deviceId,
					method: 'POST',
				}).then(res => {
					// console.log(res, 'deviceId读取所有寄存器的状态值');
					if (res.code == 200) {
						uni.hideLoading()
						uni.stopPullDownRefresh();
						this.inputData = res.data
						for(let i=0;i<this.itemList.length;i++){
							this.itemList[i].open_value = this.inputData[Number('21681')+i*3]
							this.itemList[i].close_value = this.inputData[Number('21682')+i*3]
						}
						// console.log(this.itemList);
						
						this.getType('21680')
						this.getType('21683')
						this.getType('21686')
						this.getType('21689')
						this.getType('21692')
					}
				})
			},

			padString(str, length) {
				return str.padStart(length, '0');
			},

			getType(type) {
				var number = this.padString(Number(this.inputData[type]).toString(2), 3)
				// console.log(number); //001
				// console.log(number[0]); //0  bit2  关闭
				// console.log(number[1]); //0  bit1  停止
				// console.log(number[2]); //1  bit0  打开
				if (type == '21680') {
					if (Number(number[0])) {
						this.txt_act21680 = 3
					} else if (Number(number[1])) {
						this.txt_act21680 = 2
					} else if (Number(number[2])) {
						this.txt_act21680 = 1
					} else {
						this.txt_act21680 = 0
					}
				} else if (type == '21683') {
					if (Number(number[0])) {
						this.txt_act21683 = 3
					} else if (Number(number[1])) {
						this.txt_act21683 = 2
					} else if (Number(number[2])) {
						this.txt_act21683 = 1
					} else {
						this.txt_act21683 = 0
					}
				} else if (type == '21686') {
					if (Number(number[0])) {
						this.txt_act21686 = 3
					} else if (Number(number[1])) {
						this.txt_act21686 = 2
					} else if (Number(number[2])) {
						this.txt_act21686 = 1
					} else {
						this.txt_act21686 = 0
					}
				} else if (type == '21689') {
					if (Number(number[0])) {
						this.txt_act21689 = 3
					} else if (Number(number[1])) {
						this.txt_act21689 = 2
					} else if (Number(number[2])) {
						this.txt_act21689 = 1
					} else {
						this.txt_act21689 = 0
					}
				} else if (type == '21692') {
					if (Number(number[0])) {
						this.txt_act21692 = 3
					} else if (Number(number[1])) {
						this.txt_act21692 = 2
					} else if (Number(number[2])) {
						this.txt_act21692 = 1
					} else {
						this.txt_act21692 = 0
					}
				}
			},

			change00(type, index) {
				uni.showLoading({
					title: '加载中...'
				})
				if (type == 21680) {
					this.txt_act21680 = index
				} else if (type == 21683) {
					this.txt_act21683 = index
				} else if (type == 21686) {
					this.txt_act21686 = index
				} else if (type == 21689) {
					this.txt_act21689 = index
				} else if (type == 21692) {
					this.txt_act21692 = index
				}
				var list = ["0", "0", "0"];
				if (index == 1) {
					list[2] = "1";
				} else {
					list[2] = "0";
				}
				if (index == 2) {
					list[1] = "1";
				} else {
					list[1] = "0";
				}
				if (index == 3) {
					list[0] = "1";
				} else {
					list[0] = "0";
				}
				var num = list.join("");
				var dataNum = {
					target: {
						value: parseInt(num, 2),
					},
				};
				this.change(type, dataNum);
			},

			change(code, el) {
				var data = {
					equipmentId: this.deviceId,
					regAddress: code,
					num: el.target.value,
				};
				this.delayTimer(0, data);
			},

			delayTimer(i, data) {
				const that = this;
				//整体接口
				let j = 5;
				//避免开启多个计时器
				this.timer && clearInterval(this.timer);

				this.timer = setInterval(() => {
					++i;
					if (i == j) {
						that.changeData(data);
						clearInterval(this.timer);
					}
				}, 100);
			},

			changeData(data) {
				const that = this
				this.$http({
					url: this.api.writeJinHuaControl_write,
					data: data
				}).then((res) => {
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: "success",
						})
					} else {
						uni.showToast({
							title: "失败!",
							icon: "error",
						})
					}
				});
			},

			// x#顶卷膜输入框
			blurChangeData00_1(code, el) {
				uni.showLoading({
					title: '加载中...'
				})
				
				var data = el.target.value
				// console.log(data);
				var sendData = {
					target: {
						value: data
					}
				}
				this.change(code, sendData)
			},
			blurChangeData00_2(code, el) {
				uni.showLoading({
					title: '加载中...'
				})
				var data = el.target.value
				var sendData = {
					target: {
						value: data
					}
				}
				this.change(code, sendData)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.controller {
		width: 100%;
		min-height: 100vh;
		background-color: #F5F6FA;

		.content {
			box-sizing: border-box;
			padding: 30rpx;

			::v-deep .uicon-arrow-down {
				width: 16rpx;
				height: 8rpx;
			}

			::v-deep .uicon-arrow-down::before {
				content: " ";
				width: 16rpx;
				height: 8rpx;
				background: url('../../static/downArrow.png') center no-repeat;
				background-size: 100% 100%;
				position: absolute;

			}

			.collapseItem {
				width: 100%;
				height: 298rpx;

				.line {
					width: 100%;
					height: 1rpx;
					background: #DDDDDD;
				}

				.control_model {
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					padding: 30rpx 30rpx 28rpx;

					.control {
						font-size: 28rpx;
						font-family: PingFang-SC-Bold;
						font-weight: bold;
						color: #333333;
						box-sizing: border-box;
						padding: 0 50rpx;
					}

					.model {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 10rpx;
						box-sizing: border-box;
						padding: 0 50rpx;

						.txt {
							width: 150rpx;
							height: 66rpx;
							background: #EFFCF7;
							border: 2px solid rgba(58, 187, 144, 0.25);
							border-radius: 10rpx;
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: bold;
							color: #24B383;
							text-align: center;
							line-height: 62rpx;
						}

						.txt_act {
							width: 150rpx;
							height: 66rpx;
							background: linear-gradient(0deg, #54CDA4, #27B584);
							border-radius: 10rpx;
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: bold;
							color: #EFFCF7;
							text-align: center;
							line-height: 66rpx;
						}
					}

					.line1 {
						width: 630rpx;
						height: 1rpx;
						background: #DDDDDD;
						margin: 30rpx 0;
					}

					.roll_input {
						display: flex;
						align-items: center;
						justify-content: space-around;
						box-sizing: border-box;
						padding: 0 50rpx;

						view {
							display: flex;
							align-items: center;

							view {
								width: 110rpx;
								height: 66rpx;
								background: #F5F6FA;
								border: 2px solid #E1E2E6;
								border-radius: 10rpx;
								margin-right: 15rpx;

								>input {
									width: 100%;
									height: 100%;
									text-align: center;
								}
							}

							text {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #333333;
							}
						}
					}
				}
			}
		}
	}
</style>