wszhyWx/src/views/page/LED.vue
2024-01-25 17:53:15 +08:00

682 lines
28 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="wetFan">
<div class="table-title">
<img src="../../assets/img/LED.png" alt="">补光灯
</div>
<div class="title-tips">工作方式选择
<div class="input-btn">
<div class="btn btn-tips" @click="changeOpen(0)" :class="inputData[21400] == 0 ? 'blue' : 'green'">
{{ inputData[21400] == 0 ? '无效' : '有效' }}
</div>
</div>
</div>
<div class="flex-view">
<div class="input-btn ">
<div class="btn" @click="changeOpen(1)" :class="inputData[21400] == 1 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
</div>
<div class="btn" @click="changeOpen(2)" :class="inputData[21400] == 2 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
</div>
<div class="btn" @click="changeOpen(3)" :class="inputData[21400] == 3 ? 'blue' : 'green'">
<img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
</div>
</div>
</div>
<div class="text-tips">手动启动时开灯</div>
<div class="flex-view">
<div class="input-btn ">
<div class="btn btn-w80" @click="changeIndexOpen1(0)" :class="actList2[0] == '1' ? 'blue' : 'off'">
1#
</div>
<div class="btn btn-w80" @click="changeIndexOpen1(1)" :class="actList2[1] == '1' ? 'blue' : 'off'">
2#
</div>
<div class="btn btn-w80" @click="changeIndexOpen1(2)" :class="actList2[2] == '1' ? 'blue' : 'off'">
3#
</div>
<div class="btn btn-w80" @click="changeIndexOpen1(3)" :class="actList2[3] == '1' ? 'blue' : 'off'">
4#
</div>
<div class="btn btn-w80" @click="changeIndexOpen1(4)" :class="actList2[4] == '1' ? 'blue' : 'off'">
5#
</div>
<div class="btn btn-w80" @click="changeIndexOpen1(5)" :class="actList2[5] == '1' ? 'blue' : 'off'">
6#
</div>
<div class="btn btn-w80" @click="changeIndexOpen1(6)" :class="actList2[6] == '1' ? 'blue' : 'off'">
7#
</div>
<div class="btn btn-w80" @click="changeIndexOpen1(7)" :class="actList2[7] == '1' ? 'blue' : 'off'">
8#
</div>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(2)" :class="actList3[2] == '1' ? 'blue' : 'off'">
{{actList3[2] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>高温报警时禁止启动补光灯</span>
</div>
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(1)" :class="actList3[0] == '1' ? 'blue' : 'off'">
{{actList3[0] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>使用1#日标温度</span>
</div>
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(2)" :class="actList3[1] == '1' ? 'blue' : 'off'">
{{actList3[1] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>使用2#日标温度</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-btn">
<div class="btn btn-w80" @click="changeIndexOpen2(3)" :class="actList3[3] == '1' ? 'blue' : 'off'">
{{actList3[3] == '1' ? '有效' : '无效'}}
</div>
</div>
<div class="input-main-80">
<span>室外光照大于</span>
<input @blur="blurChange10(21403, $event)" v-model="inputData[21403]" @input="changeCount10(21403, $event)"
type="text" placeholder="0">
<span>禁止启用补光灯 (KLux)</span>
</div>
</div>
<div class="flex-view padding-none shrink-none">
<div class="input-main-80">
<span>多组补光灯启动时间隔</span>
<input @blur="blurChange(21424, $event)" v-model="inputData[21424]" @input="change(21424, $event)"
type="text" placeholder="0">
<span>秒顺序启动防止同时启动瞬间功率过大</span>
</div>
</div>
<div class="text-tips">时段1</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="input-main-80">
<input @blur="blurChange(startList[0]-4, $event)" v-model="inputData[startList[0]-4]" @input="change(startList[0]-4, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(startList[0]-3, $event)" v-model="inputData[startList[0]-3]" @input="change(startList[0]-3, $event)"
type="text" placeholder="0">
<span>-</span>
<input @blur="blurChange(startList[0]-2, $event)" v-model="inputData[startList[0]-2]" @input="change(startList[0]-2, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(startList[0]-1, $event)" v-model="inputData[startList[0]-1]" @input="change(startList[0]-1, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="input-btn ">
<div class="btn btn-w80" @click="changeIndexOpen(0)" :class="actList1[0] == '1' ? 'blue' : 'off'">
1#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(1)" :class="actList1[1] == '1' ? 'blue' : 'off'">
2#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(2)" :class="actList1[2] == '1' ? 'blue' : 'off'">
3#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(3)" :class="actList1[3] == '1' ? 'blue' : 'off'">
4#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(4)" :class="actList1[4] == '1' ? 'blue' : 'off'">
5#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(5)" :class="actList1[5] == '1' ? 'blue' : 'off'">
6#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(6)" :class="actList1[6] == '1' ? 'blue' : 'off'">
7#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(7)" :class="actList1[7] == '1' ? 'blue' : 'off'">
8#
</div>
</div>
</div>
<div class="text-tips">时段2</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="input-main-80">
<input @blur="blurChange(startList[1]-4, $event)" v-model="inputData[startList[1]-4]" @input="change(startList[1]-4, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(startList[1]-3, $event)" v-model="inputData[startList[1]-3]" @input="change(startList[1]-3, $event)"
type="text" placeholder="0">
<span>-</span>
<input @blur="blurChange(startList[1]-2, $event)" v-model="inputData[startList[1]-2]" @input="change(startList[1]-2, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(startList[1]-1, $event)" v-model="inputData[startList[1]-1]" @input="change(startList[1]-1, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="input-btn ">
<div class="btn btn-w80" @click="changeIndexOpen12(0)" :class="actList12[0] == '1' ? 'blue' : 'off'">
1#
</div>
<div class="btn btn-w80" @click="changeIndexOpen12(1)" :class="actList12[1] == '1' ? 'blue' : 'off'">
2#
</div>
<div class="btn btn-w80" @click="changeIndexOpen12(2)" :class="actList12[2] == '1' ? 'blue' : 'off'">
3#
</div>
<div class="btn btn-w80" @click="changeIndexOpen12(3)" :class="actList12[3] == '1' ? 'blue' : 'off'">
4#
</div>
<div class="btn btn-w80" @click="changeIndexOpen12(4)" :class="actList12[4] == '1' ? 'blue' : 'off'">
5#
</div>
<div class="btn btn-w80" @click="changeIndexOpen12(5)" :class="actList12[5] == '1' ? 'blue' : 'off'">
6#
</div>
<div class="btn btn-w80" @click="changeIndexOpen12(6)" :class="actList12[6] == '1' ? 'blue' : 'off'">
7#
</div>
<div class="btn btn-w80" @click="changeIndexOpen12(7)" :class="actList12[7] == '1' ? 'blue' : 'off'">
8#
</div>
</div>
</div>
<div class="text-tips">时段3</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="input-main-80">
<input @blur="blurChange(startList[2]-4, $event)" v-model="inputData[startList[2]-4]" @input="change(startList[3]-4, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(startList[2]-3, $event)" v-model="inputData[startList[2]-3]" @input="change(startList[3]-3, $event)"
type="text" placeholder="0">
<span>-</span>
<input @blur="blurChange(startList[2]-2, $event)" v-model="inputData[startList[2]-2]" @input="change(startList[3]-2, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(startList[2]-1, $event)" v-model="inputData[startList[2]-1]" @input="change(startList[3]-1, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="input-btn ">
<div class="btn btn-w80" @click="changeIndexOpen13(0)" :class="actList13[0] == '1' ? 'blue' : 'off'">
1#
</div>
<div class="btn btn-w80" @click="changeIndexOpen13(1)" :class="actList13[1] == '1' ? 'blue' : 'off'">
2#
</div>
<div class="btn btn-w80" @click="changeIndexOpen13(2)" :class="actList13[2] == '1' ? 'blue' : 'off'">
3#
</div>
<div class="btn btn-w80" @click="changeIndexOpen13(3)" :class="actList13[3] == '1' ? 'blue' : 'off'">
4#
</div>
<div class="btn btn-w80" @click="changeIndexOpen13(4)" :class="actList13[4] == '1' ? 'blue' : 'off'">
5#
</div>
<div class="btn btn-w80" @click="changeIndexOpen13(5)" :class="actList13[5] == '1' ? 'blue' : 'off'">
6#
</div>
<div class="btn btn-w80" @click="changeIndexOpen13(6)" :class="actList13[6] == '1' ? 'blue' : 'off'">
7#
</div>
<div class="btn btn-w80" @click="changeIndexOpen13(7)" :class="actList13[7] == '1' ? 'blue' : 'off'">
8#
</div>
</div>
</div>
<div class="text-tips">时段4</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="input-main-80">
<input @blur="blurChange(startList[3]-4, $event)" v-model="inputData[startList[3]-4]" @input="change(startList[3]-4, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(startList[3]-3, $event)" v-model="inputData[startList[3]-3]" @input="change(startList[3]-3, $event)"
type="text" placeholder="0">
<span>-</span>
<input @blur="blurChange(startList[3]-2, $event)" v-model="inputData[startList[3]-2]" @input="change(startList[3]-2, $event)"
type="text" placeholder="0">
<span>:</span>
<input @blur="blurChange(startList[3]-1, $event)" v-model="inputData[startList[3]-1]" @input="change(startList[3]-1, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view border-none">
<div class="input-btn ">
<div class="btn btn-w80" @click="changeIndexOpen14(0)" :class="actList14[0] == '1' ? 'blue' : 'off'">
1#
</div>
<div class="btn btn-w80" @click="changeIndexOpen14(1)" :class="actList14[1] == '1' ? 'blue' : 'off'">
2#
</div>
<div class="btn btn-w80" @click="changeIndexOpen14(2)" :class="actList14[2] == '1' ? 'blue' : 'off'">
3#
</div>
<div class="btn btn-w80" @click="changeIndexOpen14(3)" :class="actList14[3] == '1' ? 'blue' : 'off'">
4#
</div>
<div class="btn btn-w80" @click="changeIndexOpen14(4)" :class="actList14[4] == '1' ? 'blue' : 'off'">
5#
</div>
<div class="btn btn-w80" @click="changeIndexOpen14(5)" :class="actList14[5] == '1' ? 'blue' : 'off'">
6#
</div>
<div class="btn btn-w80" @click="changeIndexOpen14(6)" :class="actList14[6] == '1' ? 'blue' : 'off'">
7#
</div>
<div class="btn btn-w80" @click="changeIndexOpen(7)" :class="actList1[7] == '1' ? 'blue' : 'off'">
8#
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputData: [],
indexs: 1,
actList1: [],
actList12: [],
actList13: [],
actList14: [],
actList2: [],
actList3: [],
startList:[21408,21413,21418,21423],
}
},
watch: {
$route(newVal, oldVal) {
const that = this;
this.indexs = this.$route.query.id ? this.$route.query.id : 1;
setTimeout(() => {
that.getActive1();
}, 0);
},
},
mounted() {
const that = this;
this.indexs = this.$route.query.id ? this.$route.query.id : 1;
setTimeout(() => {
that.dataInit();
}, 0);
//input获取焦点后全选
let inputList = document.querySelectorAll('input');
for (let index = 0; index < inputList.length; index++) {
inputList[index].onfocus = this.selectValue;//input放入焦点全选文本
}
},
methods: {
//失去焦点 计算公式 x/10
blurChange10(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: el.target.value * 10,
}; //避免开启多个计时器
if (store.nowInput != el.target.value) {
this.changeData(data);
}
// if (this.timer) {
// this.timer && clearInterval(this.timer);
// this.changeData(data);
// }
},
//反向计算 计算公式 x/10
changeCount10(code, el) {
var data = el.target.value * 10
var sendData = {
target: {
value: data
}
}
this.change(code, sendData)
},
// 计算展示值 计算公式 x/10
countData10(data) {
if (data) {
return data / 10
} else {
return 0
}
},
// 计算展示值 计算公式 (x - 400) / 10
countData(data) {
if (data) {
return (data - 400) / 10
} else {
return 0
}
},
//失去焦点
blurChangeCount(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: (el.target.value * 10) + 400,
}; //避免开启多个计时器
if (store.nowInput != el.target.value) {
this.changeData(data);
}
// if (this.timer) {
// this.timer && clearInterval(this.timer);
// this.changeData(data);
// }
},
changeCountData(code, el) {
var data = (el.target.value * 10) + 400
var sendData = {
target: {
value: data
}
}
this.change(code, sendData)
},
//开关无效
changeIndexOpen(active) {
if (this.actList1[active] == '1') {
this.actList1[active] = '0'
} else {
this.actList1[active] = '1'
}
this.$forceUpdate();
var revList = this.actList1.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.inputData[this.startList[0]]=parseInt(num, 2)
this.changeBtn(this.startList[0], dataNum);
},
//开关无效
changeIndexOpen12(active) {
if (this.actList12[active] == '1') {
this.actList12[active] = '0'
} else {
this.actList12[active] = '1'
}
this.$forceUpdate();
var revList = this.actList12.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.inputData[this.startList[1]]=parseInt(num, 2)
this.changeBtn(this.startList[1], dataNum);
},
//开关无效
changeIndexOpen13(active) {
if (this.actList13[active] == '1') {
this.actList13[active] = '0'
} else {
this.actList13[active] = '1'
}
this.$forceUpdate();
var revList = this.actList13.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.inputData[this.startList[2]]=parseInt(num, 2)
this.changeBtn(this.startList[2], dataNum);
},
//开关无效
changeIndexOpen14(active) {
if (this.actList14[active] == '1') {
this.actList14[active] = '0'
} else {
this.actList14[active] = '1'
}
this.$forceUpdate();
var revList = this.actList14.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.inputData[this.startList[3]]=parseInt(num, 2)
this.changeBtn(this.startList[3], dataNum);
},
//开关无效
changeIndexOpen1(active) {
if (this.actList2[active] == '1') {
this.actList2[active] = '0'
} else {
this.actList2[active] = '1'
}
this.$forceUpdate();
var revList = this.actList2.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn(21401, dataNum);
},
//开关无效
changeIndexOpen2(active) {
if (this.actList3[active] == '1') {
this.actList3[active] = '0'
} else {
this.actList3[active] = '1'
}
this.$forceUpdate();
var revList = this.actList3.slice().reverse()
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn(21402, dataNum);
},
getActive1() {
this.actList1 = []
var num = this.inputData[this.startList[0]]
var num1 = this.padString(num.toString(2), 8)
var openListNew = []
openListNew = num1.split("")
this.actList1 = openListNew.reverse();
},
getActive12() {
this.actList12 = []
var num = this.inputData[this.startList[1]]
var num1 = this.padString(num.toString(2), 8)
var openListNew = []
openListNew = num1.split("")
this.actList12 = openListNew.reverse();
},
getActive13() {
this.actList13 = []
var num = this.inputData[this.startList[2]]
var num1 = this.padString(num.toString(2), 8)
var openListNew = []
openListNew = num1.split("")
this.actList13 = openListNew.reverse();
},
getActive14() {
this.actList14 = []
var num = this.inputData[this.startList[3]]
var num1 = this.padString(num.toString(2), 8)
var openListNew = []
openListNew = num1.split("")
this.actList14 = openListNew.reverse();
},
getActive2() {
this.actList2 = []
var num = this.inputData[21401]
var num1 = this.padString(num.toString(2), 8)
var openListNew = []
openListNew = num1.split("")
this.actList2 = openListNew.reverse();
},
getActive3() {
this.actList3 = []
var num = this.inputData[21402]
var num1 = this.padString(num.toString(2), 4)
var openListNew = []
openListNew = num1.split("")
this.actList3 = openListNew.reverse();
},
// 工作方式选择
changeOpen(index) {
this.inputData[21400] = index;
var dataNum = {
target: {
value: index,
},
};
this.changeBtn(21400, dataNum);
},
dataInit() {
var store = this.$store.state
var data = {
deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
};
this.api.readfilllight(data).then(res => {
if (res.data.code == 200) {
this.inputData = res.data.data;
this.getActive1()
this.getActive12()
this.getActive13()
this.getActive14()
this.getActive2()
this.getActive3()
this.inputData[21403] =this.countData10(this.inputData[21403]);
}
})
},
//二进制转换后的补全
padString(str, length) {
return str.padStart(length, '0');
},
//反转数组 不影响原数组
myReverse(arr) {
return [...arr].reverse()
},
//全选文本
selectValue(e) {
var store = this.$store.state
store.nowInput = e.target.value
e.currentTarget.select();
},
//失去焦点
blurChange(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: el.target.value,
}; //避免开启多个计时器
if (store.nowInput != el.target.value) {
this.changeData(data);
}
// if (this.timer) {
// this.timer && clearInterval(this.timer);
// this.changeData(data);
// }
},
//修改数据的函数
changeBtn(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: el.target.value,
};
this.delayTimerBtn(0, data);
},
//切换btn的限制 写入停止后j*100毫秒调取函数
delayTimerBtn(i, data) {
const that = this;
//整体接口
let j = this.$store.state.lateSendBtn;
//避免开启多个计时器
this.timer && clearInterval(this.timer);
this.timer = setInterval(() => {
++i;
if (i == j) {
that.changeData(data);
clearInterval(this.timer);
}
}, 100);
},
change(code, el) {
var store = this.$store.state
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
regAddress: code,
num: el.target.value,
};
this.delayTimer(0, data);
},
//限制 写入停止后j*100毫秒调取函数
delayTimer(i, data) {
// const that = this;
// //整体接口
// let j = this.$store.state.lateSend;
// //避免开启多个计时器
// this.timer && clearInterval(this.timer);
// this.timer = setInterval(() => {
// ++i;
// if (i == j) {
// that.changeData(data);
// clearInterval(this.timer);
// }
// }, 100);
},
changeData(data) {
var store = this.$store.state
this.api.postControlWrite(data).then((res) => {
if (res.data.code == 200) {
this.$message({
message: res.data.msg,
type: "success",
});
store.nowInput = ''
// this.dataInit();
} else {
this.inputData[data.regAddress] = store.nowInput
this.$message.error(res.data.msg);
}
this.timer = null
});
},
},
}
</script>
<style lang="scss"></style>