481 lines
11 KiB
Vue
481 lines
11 KiB
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'">打 开</text>
|
|
<text @click="change00(item.type,2)"
|
|
:class="getTypeRoll(item.type)==2?'txt_act':'txt'">停 止</text>
|
|
<text @click="change00(item.type,3)"
|
|
:class="getTypeRoll(item.type)==3?'txt_act':'txt'">关 闭</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,$event)" type="number"
|
|
placeholder="0">
|
|
</view>
|
|
<text>通道打开;</text>
|
|
</view>
|
|
<view class="">
|
|
<view class="">
|
|
<input v-model="item.close_value" @blur="blurChangeData00_2(item.type,$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> |