wszhyWx/src/views/page/alarmSettings.vue
2024-01-11 10:26:51 +08:00

590 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="all">
<div class="table-title">
<img src="../../assets/img/alarmSettings.png" alt="">报警设置
</div>
<div class="flex-view shrink-none border-none">
<div class="input-sel input-sel-w180">
<span>目标温度1的实时温度选择</span>
<el-dropdown @command="handleCommand1($event, 20080)">
<div class="el-dropdown-link">
<input v-model="inputDataNew[20080]" type="text" class="input-input" placeholder="无">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu class="input-menu-180" slot="dropdown">
<el-dropdown-item v-for="item, index in typeList1" :key="index" :command="item.value">{{
item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20081].length" @click="changeOpenTrue(0, 20081)">
<div v-if="inputDataNew[20081][0] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项一:温度高于目标值</span>
<input @blur="blurChange10('20082', $event)" v-model="inputData['20082']"
@input="changeCount10('20082', $event)" type="text" value="60" placeholder="60" />
<span>高温报警</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20081].length" @click="changeOpenTrue(1, 20081)">
<div v-if="inputDataNew[20081][1] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项二:温度低于目标值</span>
<input @blur="blurChange10('20083', $event)" v-model="inputData['20083']"
@input="changeCount10('20083', $event)" type="text" value="60" placeholder="60" />
<span>低温报警</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20081].length" @click="changeOpenTrue(2, 20081)">
<div v-if="inputDataNew[20081][2] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项三:温度高于</span>
<input @blur="blurChangeCount('20083', $event)" v-model="inputData['20083']"
@input="changeCountData('20083', $event)" type="text" value="60" placeholder="60" />
<span>高温报警报警通道</span>
<input @blur="blurChange(20104, $event)" v-model="inputData[20104]" @input="change(20104, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="flex-sel padding-none" v-if="inputDataNew[20081].length" @click="changeOpenTrue(3, 20081)">
<div v-if="inputDataNew[20081][3] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项四:温度低于</span>
<input @blur="blurChangeCount('20084', $event)" v-model="inputData['20084']"
@input="changeCountData('20084', $event)" type="text" value="60" placeholder="60" />
<span>低温报警报警通道</span>
<input @blur="blurChange(20105, $event)" v-model="inputData[20105]" @input="change(20105, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view shrink-none border-none">
<div class="input-sel input-sel-w180">
<span>目标温度2的实时温度选择</span>
<el-dropdown @command="handleCommand1($event, 20086)">
<div class="el-dropdown-link">
<input v-model="inputDataNew[20086]" type="text" class="input-input" placeholder="无">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu class="input-menu-180" slot="dropdown">
<el-dropdown-item v-for="item, index in typeList1" :key="index" :command="item.value">{{
item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20087].length" @click="changeOpenTrue(0, 20087)">
<div v-if="inputDataNew[20087][0] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项一:温度高于目标值</span>
<input @blur="blurChange10('20087', $event)" v-model="inputData['20087']"
@input="changeCount10('20087', $event)" type="text" value="60" placeholder="60" />
<span>高温报警</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20087].length" @click="changeOpenTrue(1, 20087)">
<div v-if="inputDataNew[20087][1] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项二:温度低于目标值</span>
<input @blur="blurChange10('20088', $event)" v-model="inputData['20088']"
@input="changeCount10('20088', $event)" type="text" value="60" placeholder="60" />
<span>低温报警</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20087].length" @click="changeOpenTrue(2, 20087)">
<div v-if="inputDataNew[20087][2] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项三:温度高于</span>
<input @blur="blurChangeCount('20089', $event)" v-model="inputData['20089']"
@input="changeCountData('20089', $event)" type="text" value="60" placeholder="60" />
<span>高温报警报警通道</span>
<input @blur="blurChange(20106, $event)" v-model="inputData[20106]" @input="change(20106, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="flex-sel padding-none" v-if="inputDataNew[20087].length" @click="changeOpenTrue(3, 20087)">
<div v-if="inputDataNew[20087][3] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项四:温度低于</span>
<input @blur="blurChangeCount('20090', $event)" v-model="inputData['20090']"
@input="changeCountData('20090', $event)" type="text" value="60" placeholder="60" />
<span>低温报警报警通道</span>
<input @blur="blurChange(20107, $event)" v-model="inputData[20107]" @input="change(20107, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view shrink-none border-none">
<div class="input-sel input-sel-w180">
<span>目标湿度1的实时湿度选择</span>
<el-dropdown @command="handleCommand2($event, 20092)">
<div class="el-dropdown-link">
<input v-model="inputDataNew[20092]" type="text" class="input-input" placeholder="无">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu class="input-menu-180" slot="dropdown">
<el-dropdown-item v-for="item, index in typeList2" :key="index" :command="item.value">{{
item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20093].length" @click="changeOpenTrue(0, 20093)">
<div v-if="inputDataNew[20093][0] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项一:湿度高于目标值</span>
<input @blur="blurChange10('20094', $event)" v-model="inputData['20094']"
@input="changeCount10('20094', $event)" type="text" value="60" placeholder="60" />
<span>%RH高湿报警</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20093].length" @click="changeOpenTrue(1, 20093)">
<div v-if="inputDataNew[20093][1] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项二:湿度低于目标值</span>
<input @blur="blurChange10('20095', $event)" v-model="inputData['20095']"
@input="changeCount10('20095', $event)" type="text" value="60" placeholder="60" />
<span>%RH低湿报警</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20093].length" @click="changeOpenTrue(2, 20093)">
<div v-if="inputDataNew[20093][2] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项三:湿度高于</span>
<input @blur="blurChange10('20096', $event)" v-model="inputData['20096']"
@input="changeCount10('20096', $event)" type="text" value="60" placeholder="60" />
<span>%RH高湿报警报警通道</span>
<input @blur="blurChange(20108, $event)" v-model="inputData[20108]" @input="change(20108, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view">
<div class="flex-sel padding-none" v-if="inputDataNew[20093].length" @click="changeOpenTrue(3, 20093)">
<div v-if="inputDataNew[20093][3] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项四:湿度低于</span>
<input @blur="blurChange10('20097', $event)" v-model="inputData['20097']"
@input="changeCount10('20097', $event)" type="text" value="60" placeholder="60" />
<span>%RH低湿报警报警通道</span>
<input @blur="blurChange(20109, $event)" v-model="inputData[20109]" @input="change(20109, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view shrink-none border-none">
<div class="input-sel input-sel-w180">
<span>目标湿度2的实时湿度选择</span>
<el-dropdown @command="handleCommand2($event, 20098)">
<div class="el-dropdown-link">
<input v-model="inputDataNew[20098]" type="text" class="input-input" placeholder="无">
<div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
</div>
<el-dropdown-menu class="input-menu-180" slot="dropdown">
<el-dropdown-item v-for="item, index in typeList2" :key="index" :command="item.value">{{
item.label }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20099].length" @click="changeOpenTrue(0, 20099)">
<div v-if="inputDataNew[20099][0] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项一:湿度高于目标值</span>
<input @blur="blurChange10('20100', $event)" v-model="inputData['20100']"
@input="changeCount10('20100', $event)" type="text" value="60" placeholder="60" />
<span>%RH高湿报警</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20099].length" @click="changeOpenTrue(1, 20099)">
<div v-if="inputDataNew[20099][1] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项二:湿度低于目标值</span>
<input @blur="blurChange10('20101', $event)" v-model="inputData['20101']"
@input="changeCount10('20101', $event)" type="text" value="60" placeholder="60" />
<span>%RH低湿报警</span>
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20099].length" @click="changeOpenTrue(2, 20099)">
<div v-if="inputDataNew[20099][2] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项三:湿度高于</span>
<input @blur="blurChange10('20102', $event)" v-model="inputData['20102']"
@input="changeCount10('20102', $event)" type="text" value="60" placeholder="60" />
<span>%RH高湿报警报警通道</span>
<input @blur="blurChange(20110, $event)" v-model="inputData[20110]" @input="change(20110, $event)"
type="text" placeholder="0">
</div>
</div>
<div class="flex-view border-none">
<div class="flex-sel padding-none" v-if="inputDataNew[20099].length" @click="changeOpenTrue(3, 20099)">
<div v-if="inputDataNew[20099][3] == 0" class="no-sel margin-none"></div>
<div v-else class="sel margin-none"></div>
</div>
<div class="input-main input-main-w80">
<span>选项四:湿度低于</span>
<input @blur="blurChange10('20103', $event)" v-model="inputData['20103']"
@input="changeCount10('20103', $event)" type="text" value="60" placeholder="60" />
<span>%RH低湿报警报警通道</span>
<input @blur="blurChange(20111, $event)" v-model="inputData[20111]" @input="change(20111, $event)"
type="text" placeholder="0">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputDataNew: [],
inputData: [],
typeList1: [
{ label: '1#平均温度', value: 0 },
{ label: '2#平均温度', value: 1 },
{ label: '1#温度传感器', value: 2 },
{ label: '2#温度传感器', value: 3 },
{ label: '3#温度传感器', value: 4 },
{ label: '4#温度传感器', value: 5 },
{ label: '5#温度传感器', value: 6 },
{ label: '6#温度传感器', value: 7 },
{ label: '7#温度传感器', value: 8 },
{ label: '8#温度传感器', value: 9 },
{ label: '9#温度传感器', value: 10 },
{ label: '10#温度传感器', value: 11 },
{ label: '11#温度传感器', value: 12 },
{ label: '12#温度传感器', value: 13 },
{ label: '13#温度传感器', value: 14 },
{ label: '14#温度传感器', value: 15 },
{ label: '15#温度传感器', value: 16 },],
typeList2: [
{ label: '1#平均湿度', value: 0 },
{ label: '2#平均湿度', value: 1 },
{ label: '1#湿度传感器', value: 2 },
{ label: '2#湿度传感器', value: 3 },
{ label: '3#湿度传感器', value: 4 },
{ label: '4#湿度传感器', value: 5 },
{ label: '5#湿度传感器', value: 6 },
{ label: '6#湿度传感器', value: 7 },
{ label: '7#湿度传感器', value: 8 },
{ label: '8#湿度传感器', value: 9 },
{ label: '9#湿度传感器', value: 10 },
{ label: '10#湿度传感器', value: 11 },
{ label: '11#湿度传感器', value: 12 },
{ label: '12#湿度传感器', value: 13 },
{ label: '13#湿度传感器', value: 14 },
{ label: '14#湿度传感器', value: 15 },
{ label: '15#湿度传感器', value: 16 },],
}
},
mounted() {
this.dataInit()
//input获取焦点后全选
let inputList = document.querySelectorAll('input');
for (let index = 0; index < inputList.length; index++) {
inputList[index].onfocus = this.selectValue;//input放入焦点全选文本
}
},
methods: {
getData1(data) {
var name = ''
this.typeList1.forEach((el, index) => {
if (el.value == data) {
name = el.label
}
})
return name
},
getData2(data) {
var name = ''
this.typeList2.forEach((el, index) => {
if (el.value == data) {
name = el.label
}
})
return name
},
//类型选择温度
handleCommand1(command, code) {
this.typeList1.forEach((el, index) => {
if (el.value == command) {
this.inputDataNew[code] = el.label
}
})
var dataNum = {
target: {
value: command,
},
};
this.changeBtn(code, dataNum);
},
//类型选择湿度
handleCommand2(command, code) {
this.typeList2.forEach((el, index) => {
if (el.value == command) {
this.inputDataNew[code] = el.label
}
})
var dataNum = {
target: {
value: command,
},
};
this.changeBtn(code, dataNum);
},
//失去焦点 计算公式 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 (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 (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)
},
padString(str, length) {
return str.padStart(length, '0');
},
//反转数组 不影响原数组
myReverse(arr) {
return [...arr].reverse()
},
changeOpenTrue(index, code) {
if (this.inputDataNew[code][index] == 0) {
this.inputDataNew[code][index] = 1
} else {
this.inputDataNew[code][index] = 0
}
this.$forceUpdate();
var num = this.myReverse(this.inputDataNew[code]).join("")
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.changeBtn(code, dataNum);
},
dataInit() {
var store = this.$store.state
var data = {
deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
};
this.api.targetValue(data).then(res => {
if (res.data.code == 200) {
this.inputData = JSON.parse(JSON.stringify(res.data.data));
this.inputDataNew = JSON.parse(JSON.stringify(res.data.data))
this.inputDataNew[20080] = this.getData1(this.inputData[20080])
this.inputDataNew[20086] = this.getData1(this.inputData[20086])
this.inputData[20082] = this.countData10(this.inputData[20082])
this.inputData[20083] = this.countData10(this.inputData[20083])
this.inputData[20084] = this.countData(this.inputData[20084])
this.inputData[20085] = this.countData(this.inputData[20085])
this.inputData[20088] = this.countData10(this.inputData[20088])
this.inputData[20089] = this.countData10(this.inputData[20089])
this.inputData[20090] = this.countData(this.inputData[20090])
this.inputData[20091] = this.countData(this.inputData[20091])
this.inputDataNew[20092] = this.getData2(this.inputData[20092])
this.inputDataNew[20098] = this.getData2(this.inputData[20098])
this.inputData[20094] = this.countData10(this.inputData[20094])
this.inputData[20095] = this.countData10(this.inputData[20095])
this.inputData[20096] = this.countData10(this.inputData[20096])
this.inputData[20097] = this.countData10(this.inputData[20097])
this.inputData[20100] = this.countData10(this.inputData[20100])
this.inputData[20101] = this.countData10(this.inputData[20101])
this.inputData[20102] = this.countData10(this.inputData[20102])
this.inputData[20103] = this.countData10(this.inputData[20103])
this.getOpenData(20081)
this.getOpenData(20087)
this.getOpenData(20093)
this.getOpenData(20099)
}
})
},
getOpenData(code){
var num1 = this.inputData[code]?this.inputData[code]:0
var num11 = this.padString(num1.toString(2), 4)
var openList1New
openList1New = num11.split("")
this.inputDataNew[code] = openList1New.reverse()
},
//全选文本
selectValue(e) {
var store = this.$store.state
store.nowInput = e.target.value
e.currentTarget.select();
},
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);
},
//修改数据的函数
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);
},
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>