wszhyWx/src/views/page/stir.vue
2025-09-15 10:24:24 +08:00

869 lines
25 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="irrigateSet">
<div class="table-title">
<img src="../../assets/img/intrinsicParameter.png" alt="" />{{ pageName }}
</div>
<div class="title-tips">控制模式选择
<div class="input-btn">
<div class="btn btn-tips" @click="changeOpen(0)" :class="inputData['600'] == 0 ? 'green' : 'blue'">
{{ inputData['600'] == 0 ? $t('text.invalid') : $t('text.valid') }}
</div>
</div>
</div>
<div class="flex-view">
<div class="input-btn">
<div
class="btn"
@click="change00(2)"
:class="topActive[2] == 1 ? 'blue' : 'green'"
>
<img src="../../assets/image/irrigateSet1.png" alt="" />{{
$t("text.stop")
}}
</div>
<div
class="btn"
@click="change00(1)"
:class="topActive[1] == 1 ? 'blue' : 'green'"
>
<img src="../../assets/image/irrigateSet3.png" alt="" />{{
$t("text.manual")
}}
</div>
<div
class="btn"
@click="change00(0)"
:class="topActive[0] == 1 ? 'blue' : 'green'"
>
<img src="../../assets/image/irrigateSet2.png" alt="" />{{
$t("text.auto")
}}
</div>
</div>
</div>
<div class="flex-view border-none padding-none">
<div class="input-main-60">
<span>手动启动时间</span>
<input
@blur="blurChange10('601', $event)"
v-model="inputData['601']"
@input="changeData10('601', $event)"
type="text"
value="60"
placeholder="60"
/>
<span></span>
</div>
</div>
<div class="text-tips">手自动启动搅拌电机选择:</div>
<div class="flex-view">
<div class="input-btn">
<div
class="btn btn-w70"
@click="changeIndexOpen1(0)"
:class="actList1[0] == '1' ? 'blue' : 'off'"
>
A肥
</div>
<div
class="btn btn-w70"
@click="changeIndexOpen1(1)"
:class="actList1[1] == '1' ? 'blue' : 'off'"
>
B肥
</div>
<div
class="btn btn-w70"
@click="changeIndexOpen1(2)"
:class="actList1[2] == '1' ? 'blue' : 'off'"
>
C肥
</div>
<div
class="btn btn-w70"
@click="changeIndexOpen1(3)"
:class="actList1[3] == '1' ? 'blue' : 'off'"
>
D肥
</div>
<div
class="btn btn-w70"
@click="changeIndexOpen1(4)"
:class="actList1[4] == '1' ? 'blue' : 'off'"
>
E肥
</div>
<div
class="btn btn-w70"
@click="changeIndexOpen1(5)"
:class="actList1[5] == '1' ? 'blue' : 'off'"
>
F肥
</div>
<div
class="btn btn-w70"
@click="changeIndexOpen1(6)"
:class="actList1[6] == '1' ? 'blue' : 'off'"
>
G肥
</div>
<div
class="btn btn-w70"
@click="changeIndexOpen1(7)"
:class="actList1[7] == '1' ? 'blue' : 'off'"
>
H肥
</div>
<div
class="btn btn-w70"
@click="changeIndexOpen1(8)"
:class="actList1[8] == '1' ? 'blue' : 'off'"
>
</div>
</div>
</div>
<div class="flex-view padding-none shrink-none">
<div class="input-sel input-sel-w180">
<span>运行模式选择:</span>
<el-dropdown @command="handleCommand1($event, 603)">
<div class="el-dropdown-link">
<input
v-model="inputDataNew[603]"
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>
<!-- 时间点模式 -->
<!-- -->
<block v-show="inputData['603'] == 1">
<template>
<div class="title-tips-bold">时间点模式</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="input-main-60">
<span>每次启动时长</span>
<input
@blur="blurChange10('604', $event)"
v-model="inputData['604']"
@input="changeData10('604', $event)"
type="text"
value="60"
placeholder="60"
/>
<span></span>
</div>
</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="number circle">1</div>
<div class="input-main-60">
<input
@blur="blurChange('605', $event)"
v-model="inputData['605']"
@input="change('605', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('606', $event)"
v-model="inputData['606']"
@input="change('606', $event)"
type="number"
placeholder="0"
/>
</div>
</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="number circle">2</div>
<div class="input-main-60">
<input
@blur="blurChange('607', $event)"
v-model="inputData['607']"
@input="change('607', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('608', $event)"
v-model="inputData['608']"
@input="change('608', $event)"
type="number"
placeholder="0"
/>
</div>
</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="number circle">3</div>
<div class="input-main-60">
<input
@blur="blurChange('609', $event)"
v-model="inputData['609']"
@input="change('609', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('610', $event)"
v-model="inputData['610']"
@input="change('610', $event)"
type="number"
placeholder="0"
/>
</div>
</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="number circle">4</div>
<div class="input-main-60">
<input
@blur="blurChange('611', $event)"
v-model="inputData['611']"
@input="change('611', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('612', $event)"
v-model="inputData['612']"
@input="change('612', $event)"
type="number"
placeholder="0"
/>
</div>
</div>
<div class="flex-view padding-none shrink-none">
<div class="number circle">5</div>
<div class="input-main-60">
<input
@blur="blurChange('613', $event)"
v-model="inputData['613']"
@input="change('613', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('614', $event)"
v-model="inputData['614']"
@input="change('614', $event)"
type="number"
placeholder="0"
/>
</div>
</div>
</template>
</block>
<!-- 时间段模式 -->
<!-- -->
<block v-show="inputData['603'] == 2">
<template>
<div class="title-tips-bold">时间段模式</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="input-main-60">
<span>每次启动时长</span>
<input
@blur="blurChange10('615', $event)"
v-model="inputData['615']"
@input="changeData10('615', $event)"
type="text"
value="60"
placeholder="60"
/>
<span></span>
</div>
</div>
<div class="flex-view border-none padding-none shrink-none">
<div class="number circle">1</div>
<div class="input-main-60">
<input
@blur="blurChange('617', $event)"
v-model="inputData['617']"
@input="change('617', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('618', $event)"
v-model="inputData['618']"
@input="change('618', $event)"
type="number"
placeholder="0"
/>
<span>-</span>
<input
@blur="blurChange('619', $event)"
v-model="inputData['619']"
@input="change('619', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('620', $event)"
v-model="inputData['620']"
@input="change('620', $event)"
type="number"
placeholder="0"
/>
<span style="font-size: 16px">{{
$t("irrigateSetSoil.intervalStart.timesInRange")
}}</span>
<input
@blur="blurChange('616', $event)"
v-model="inputData['616']"
@input="change('616', $event)"
type="number"
placeholder="0"
/>
</div>
</div>
<div class="flex-view shrink-none">
<div class="number circle">2</div>
<div class="input-main-60">
<input
@blur="blurChange('622', $event)"
v-model="inputData['622']"
@input="change('622', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('623', $event)"
v-model="inputData['623']"
@input="change('623', $event)"
type="number"
placeholder="0"
/>
<span>-</span>
<input
@blur="blurChange('624', $event)"
v-model="inputData['624']"
@input="change('624', $event)"
type="number"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange('625', $event)"
v-model="inputData['625']"
@input="change('625', $event)"
type="number"
placeholder="0"
/>
<span style="font-size: 16px">{{
$t("irrigateSetSoil.intervalStart.timesInRange")
}}</span>
<input
@blur="blurChange('621', $event)"
v-model="inputData['621']"
@input="change('621', $event)"
type="number"
placeholder="0"
/>
</div>
</div>
</template>
</block>
<!-- 联动模式 -->
<!-- -->
<block v-show="inputData['603'] == 3">
<template>
<div class="title-tips-bold">联动模式</div>
<div class="flex-view shrink-none">
<div class="input-main-60">
<span>施肥机启动时提前</span>
<input
@blur="blurChange('626', $event)"
v-model="inputData['626']"
@input="change('626', $event)"
type="text"
value="60"
placeholder="60"
/>
<span>联动施肥配方搅拌</span>
</div>
</div>
</template>
</block>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span>A肥搅拌通道选择</span>
<input
@blur="blurChange('627', $event)"
v-model="inputData['627']"
@input="change('627', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span></span>
<div class="input-main-60">
<span>B肥搅拌通道选择</span>
<input
@blur="blurChange('628', $event)"
v-model="inputData['628']"
@input="change('628', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span></span>
<div class="input-main-60">
<span>C肥搅拌通道选择</span>
<input
@blur="blurChange('629', $event)"
v-model="inputData['629']"
@input="change('629', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span>;</span>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span>D肥搅拌通道选择</span>
<input
@blur="blurChange('630', $event)"
v-model="inputData['630']"
@input="change('630', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span></span>
<div class="input-main-60">
<span>E肥搅拌通道选择</span>
<input
@blur="blurChange('631', $event)"
v-model="inputData['631']"
@input="change('631', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span></span>
<div class="input-main-60">
<span>F肥搅拌通道选择</span>
<input
@blur="blurChange('632', $event)"
v-model="inputData['632']"
@input="change('632', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span>;</span>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span>G肥搅拌通道选择</span>
<input
@blur="blurChange('633', $event)"
v-model="inputData['633']"
@input="change('633', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span></span>
<div class="input-main-60">
<span>H肥搅拌通道选择</span>
<input
@blur="blurChange('634', $event)"
v-model="inputData['634']"
@input="change('634', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span></span>
<div class="input-main-60">
<span>酸搅拌通道选择</span>
<input
@blur="blurChange('635', $event)"
v-model="inputData['635']"
@input="change('635', $event)"
type="text"
value="60"
placeholder="60"
/>
</div>
<span></span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
topActive: 1,
inputData: [],
inputDataNew: [],
actList1: [],
loading: null,
pageName: "搅拌配置",
typeList1: [
{ label: "时间点模式", value: 1 },
{ label: "时间段模式", value: 2 },
{ label: "联动模式", value: 3 },
],
};
},
watch: {
$route(newVal, oldVal) {
const that = this;
this.indexs = this.$route.query.id ? this.$route.query.id : 1;
if (this.$route.query.name) {
this.pageName = this.$route.query.name;
}
setTimeout(() => {
that.getActive1();
}, 0);
},
"$store.state.equipmentIndex"(newVal, oldVal) {
this.dataInit();
},
},
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放入焦点全选文本
}
if (this.$route.query.name) {
this.pageName = this.$route.query.name;
}
},
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);
},
getData1(data) {
var name = "";
this.typeList1.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;
}
});
this.inputData[code] = command;
var dataNum = {
target: {
value: command,
},
};
this.changeBtn(code, dataNum);
},
changeIndexOpen1(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.changeBtn(602, dataNum);
},
getActive1() {
this.actList1 = [];
var num = this.inputData["602"];
var num1 = this.padString(num.toString(2), 8);
var openListNew = [];
openListNew = num1.split("");
this.actList1 = openListNew.reverse();
},
// 工作方式选择
changeOpen(index) {
this.inputData['600'] = index;
var dataNum = {
target: {
value: index,
},
};
this.getType00();
this.changeBtn('600', dataNum);
},
change00(index) {
var list = ["0", "0", "0"];
list[index] = "1";
this.topActive = list;
this.$forceUpdate();
var revList = list.slice().reverse();
var num = revList.join("");
var dataNum = {
target: {
value: parseInt(num, 2),
},
};
this.inputData['600']=parseInt(num, 2)
this.changeBtn("600", dataNum);
},
getType00() {
var number = this.padString(this.inputData["600"].toString(2), 3);
console.log(number);
var openListNew = [];
openListNew = number.split("");
this.topActive = openListNew.reverse();
// if (Number(number[0])) {
// this.topActive = 1
// } else if (Number(number[1])) {
// this.topActive = 2
// } else if (Number(number[2])) {
// this.topActive = 3
// } else {
// this.topActive = 0
// }
},
dataInit() {
this.loading = this.$loading({
lock: true,
text: this.$t("message.loading"),
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
var store = this.$store.state;
var data = {
equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
pattern: 600, //需要根据文档填写 //6目标ph-数值
regNum: 36,
};
this.api.postReg(data).then((res) => {
this.loading.close();
if (res.data.code == 200) {
this.inputData = res.data.data;
this.inputDataNew = JSON.parse(JSON.stringify(res.data.data));
this.getType00();
this.getActive1();
this.inputDataNew[603] = this.getData1(this.inputData[603]);
this.inputData[601] = this.countData10(this.inputData[601]);
this.inputData[604] = this.countData10(this.inputData[604]);
this.inputData[615] = this.countData10(this.inputData[615]);
}
});
},
//二进制转换后的补全
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,
}; //避免开启多个计时器
console.log(store.nowInput, 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.postWriteFs(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>