wszhyWx/src/views/page/air-conditioning.vue
2025-03-05 11:01:32 +08:00

727 lines
23 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/geothermalFan.png" alt="" />{{ pageName }}
</div>
<div class="title-tips">
工作方式选择
<div class="input-btn">
<div
class="btn btn-tips"
@click="changeOpen(0)"
:class="inputData[22040] == 0 ? 'blue' : 'green'"
>
{{ inputData[22040] == 0 ? "无效" : "有效" }}
</div>
</div>
</div>
<div class="flex-view">
<div class="input-btn">
<div
class="btn"
@click="changeOpen(1)"
:class="inputData[22040] == 1 ? 'blue' : 'green'"
>
<img src="../../assets/image/irrigateSet2.png" alt="" />自动运行
</div>
<div
class="btn"
@click="changeOpen(2)"
:class="inputData[22040] == 2 ? 'blue' : 'green'"
>
<img src="../../assets/image/irrigateSet3.png" alt="" />手动打开
</div>
<div
class="btn"
@click="changeOpen(3)"
:class="inputData[22040] == 3 ? 'blue' : 'green'"
>
<img src="../../assets/image/irrigateSet1.png" alt="" />手动关闭
</div>
</div>
</div>
<div class="title-tips-bold"><img src="@/assets/img/title-tips-bold-icon.png" alt=""> 手动设置</div>
<div class="flex-view padding-none shrink-none" :class="inputData[22042]==3?'border-none':''">
<div class="input-main-60">
<span></span><span></span>
<span>手动开启空调的温度</span>
<input
@blur="blurChangeCount(22043, $event)"
v-model="inputData[22043]"
@input="changeCountData(22043, $event)"
type="text"
placeholder="0"
/>
<span></span>
</div>
</div>
<div class="flex-view padding-none shrink-none" v-if="inputData[22042]==3">
<div class="input-main-60">
<span></span><span></span>
<span>手动开启空调的湿度</span>
<input
@blur="blurChange10(22044, $event)"
v-model="inputData[22044]"
@input="changeCount10(22044, $event)"
type="text"
placeholder="0"
/>
<span>%RH</span>
</div>
</div>
<div class="title-tips-bold"><img src="@/assets/img/title-tips-bold-icon.png" alt="">手自动设置</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-sel input-sel-w180">
<span></span><span></span>
<span>空调的风速</span>
<el-dropdown @command="handleCommand1($event, 22041)">
<div class="el-dropdown-link">
<input
v-model="inputDataNew[22041]"
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>
<span>(0是空调自动调整风速) </span>
</div>
</div>
<div class="flex-view padding-none shrink-none">
<div class="input-sel input-sel-w180">
<span></span><span></span>
<span>空调的模式</span>
<el-dropdown @command="handleCommand2($event, 22042)">
<div class="el-dropdown-link">
<input
v-model="inputDataNew[22042]"
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="title-tips-bold"><img src="@/assets/img/title-tips-bold-icon.png" alt="">自动设置</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main">
<span></span><span></span>
</div>
<div class="input-btn">
<div
class="btn btn-w70"
@click="changeIndexOpen(0)"
:class="actList1[0] == '1' ? 'blue' : 'off'"
>
{{ actList1[0] == "1" ? "有效" : "无效" }}
</div>
</div>
<div class="input-main-60">
<span>制热时段启用</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>工作时段</span>
<input
@blur="blurChange(22049, $event)"
v-model="inputData[22049]"
@input="change(22049, $event)"
type="text"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange(22050, $event)"
v-model="inputData[22050]"
@input="change(22050, $event)"
type="text"
placeholder="0"
/>
<span>-</span>
<input
@blur="blurChange(22051, $event)"
v-model="inputData[22051]"
@input="change(22051, $event)"
type="text"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange(22052, $event)"
v-model="inputData[22052]"
@input="change(22052, $event)"
type="text"
placeholder="0"
/>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main">
<span></span><span></span>
</div>
<div class="input-btn">
<div
class="btn btn-w70"
@click="changeIndexOpen(1)"
:class="actList1[1] == '1' ? 'blue' : 'off'"
>
{{ actList1[1] == "1" ? "有效" : "无效" }}
</div>
</div>
<div class="input-main-60">
<span>制冷时段启用</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>工作时段</span>
<input
@blur="blurChange(22053, $event)"
v-model="inputData[22053]"
@input="change(22053, $event)"
type="text"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange(22054, $event)"
v-model="inputData[22054]"
@input="change(22054, $event)"
type="text"
placeholder="0"
/>
<span>-</span>
<input
@blur="blurChange(22055, $event)"
v-model="inputData[22055]"
@input="change(22055, $event)"
type="text"
placeholder="0"
/>
<span>:</span>
<input
@blur="blurChange(22056, $event)"
v-model="inputData[22056]"
@input="change(22056, $event)"
type="text"
placeholder="0"
/>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>空调PID采样时间</span>
<input
@blur="blurChange(22045, $event)"
v-model="inputData[22045]"
@input="change(22045, $event)"
type="text"
placeholder="0"
/>
<span>分钟</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>比例调节系数</span>
<input
@blur="blurChange(22046, $event)"
v-model="inputData[22046]"
@input="change(22046, $event)"
type="text"
placeholder="0"
/>
<span class="tips"
>(比例需求=目标温度-实时温度*10*比例调节系数)</span
>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>积分调节系数</span>
<input
@blur="blurChange(22047, $event)"
v-model="inputData[22047]"
@input="change(22047, $event)"
type="text"
placeholder="0"
/>
<span class="tips">(积分需求=累计积分*10*积分调节系数)</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>微分调节系数</span>
<input
@blur="blurChange(22048, $event)"
v-model="inputData[22048]"
@input="change(22048, $event)"
type="text"
placeholder="0"
/>
<span class="tips">(微分需求=(这次差值-上次差值)*10*微分调节系数)</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span class="tips">总PID输出=比例需求+积分需求+微分需求(>=10000开始调节)</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>空调停机温度差值</span>
<input
@blur="blurChange10(22059, $event)"
v-model="inputData[22059]"
@input="changeCount10(22059, $event)"
type="text"
placeholder="0"
/>
<span></span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span class="tips">加热时实时温度>目标温度+空调停机温度差值空调停机</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span class="tips">制冷时实时温度<目标温度-空调停止温度差值空调停机</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none" v-if="inputData[22042]==3">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>空调停机湿度差值</span>
<input
@blur="blurChange10(22060, $event)"
v-model="inputData[22060]"
@input="changeCount10(22060, $event)"
type="text"
placeholder="0"
/>
<span>%RH</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none" v-if="inputData[22042]==3">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span class="tips">实时温度<目标温度-空调停机温度差值空调停机</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main">
<span></span><span></span>
</div>
<div class="input-btn">
<div
class="btn btn-w70"
@click="changeIndexOpen(2)"
:class="actList1[2] == '1' ? 'blue' : 'off'"
>
{{ actList1[2] == "1" ? "有效" : "无效" }}
</div>
</div>
<div class="input-main-60">
<span>优先冷暖风机启动</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<span>冷暖风机达到最大输出能力后仍然达不到目标值</span>
</div>
</div>
<div class="flex-view padding-none border-none shrink-none">
<div class="input-main-60">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>
<input
@blur="blurChange(22058, $event)"
v-model="inputData[22058]"
@input="change(22058, $event)"
type="text"
placeholder="0"
/>
<span>分钟后启动空调</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
inputData: [],
inputDataNew: [],
indexs: 1,
actList1: [],
loading: null,
pageName: "空调",
typeList1: [
{ label: "自动调整风速", value: 0 },
{ label: "1级风速", value: 1 },
{ label: "2级风速", value: 2 },
{ label: "3级风速", value: 3 },
{ label: "4级风速", value: 4 },
{ label: "5级风速", value: 5 },
{ label: "6级风速", value: 6 },
],
typeList2: [
{ label: "自动模式", value: 0 },
{ label: "制冷模式", value: 1 },
{ label: "制热模式", value: 2 },
{ label: "除湿模式", value: 3 },
{ label: "送风模式", value: 4 },
],
};
},
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);
},
//类型选择
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);
},
//制冷制热类型选择
handleCommand2(command, code) {
this.typeList2.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);
},
// 工作方式选择
changeOpen(index) {
this.inputData[22040] = index;
var dataNum = {
target: {
value: index,
},
};
this.changeBtn(22040, dataNum);
},
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;
},
// 空调时段限制
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[22057] = parseInt(num, 2);
this.changeBtn(22057, dataNum);
},
getActive1() {
this.actList1 = [];
var num = this.inputData[22057];
var num1 = this.padString(num.toString(2), 3);
var openListNew = [];
openListNew = num1.split("");
this.actList1 = openListNew.reverse();
},
dataInit() {
this.loading = this.$loading({
lock: true,
text: "加载中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
var store = this.$store.state;
var data = {
deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
};
this.api.airconditioner(data).then((res) => {
this.loading.close();
if (res.data.code == 200) {
this.inputData = JSON.parse(JSON.stringify(res.data.data));
this.inputDataNew = JSON.parse(JSON.stringify(res.data.data));
// this.inputData[22047] = this.countData10(this.inputData[22047]);
this.inputData[22043] = this.countData(this.inputData[22043]);
this.inputData[22044] = this.countData10(this.inputData[22044]);
this.inputData[22059] = this.countData10(this.inputData[22059]);
this.inputData[22060] = this.countData10(this.inputData[22060]);
this.inputDataNew[22041] = this.getData1(this.inputData[22041]);
this.inputDataNew[22042] = this.getData2(this.inputData[22042]);
this.getActive1();
// this.inputDataNew[22045] = this.getData1(this.inputData[22045]);
}
});
},
//二进制转换后的补全
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>