wszhyWx/src/views/page/synthesis-con.vue

<template>
    <div class="synthesis-con">
        <div class="table-title">
            <img src="../../assets/image/synthesis.png" alt=""> 传感器输入合成
        </div>
        <div class="synthesis-content">
            <div class="left-table">
                <div class="table-header">类别</div>
                <div class="table-tr">
                    <div v-for="item, index in leftList" :key="index">{{ item }}</div>
                </div>
            </div>
            <div class="right-table scroll">
                <div>
                    <div class="table-header">
                        <div class="" v-for="item, index in 16">{{ index + 1 }}</div>
                    </div>
                    <div class="table-tr">
                        <div v-for="item, index in rightList" :key="index">
                            <div v-for="item1, index1 in item">
                                <div :class="item1 == '1' ? 'sel' : 'no-sel'" @click="changeType(index, index1)"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputData: [],
            nowSel: {
                index: -1,
                value: 0,
            },
            leftList: ['1#平均温度',
                '2#平均温度',
                '1#平均湿度',
                '2#平均湿度',
                '光亮度',
                'CO2',
                '土壤温度',
                '土壤湿度',
                '营养液PH',
                '营养液EC',
                '水温',
            ],
            rightList: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0', '0'],

        }
    },
    mounted() {
        this.dataInit()
    },
    methods: {
        checkTime(i) {
            if (i < 10) {
                i = "0" + i;
            }

            return i;
        },
        padString(str, length) {
            return str.padStart(length, '0');
        },
        getList(data) {
            var num = data
            var num1 = this.padString(num.toString(2), 16)
            var openListNew = num1.split("")
            var list = openListNew.reverse()
            return list
        },
        dataInit() {
            var store = this.$store.state
            var data = {
                deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
            };
            this.api.getReadControlSensorInputSynthesis(data).then((res) => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.leftList.forEach((el, index) => {

                        this.rightList[index] = this.getList(this.inputData['212' + this.checkTime(index)])
                    })
                    this.$forceUpdate();
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        //反转数组 不影响原数组
        myReverse(arr) {
            return [...arr].reverse()
        },
        changeType(index, index1) {
            var store = this.$store.state
            const that = this
            if (this.rightList[index][index1] == '1') {
                this.rightList[index][index1] = '0'
            } else {
                this.rightList[index][index1] = '1'
            }
            this.$forceUpdate();
            var num = this.myReverse(this.rightList[index]).join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };

            if (this.nowSel.index == -1) {
                this.changeBtn('212' + this.checkTime(index), dataNum)
                this.nowSel.index = index
                this.nowSel.value = parseInt(num, 2)
            } else {
                if (this.nowSel.index == index) {
                    this.changeBtn('212' + this.checkTime(index), dataNum)
                    this.nowSel.index = index
                    this.nowSel.value = parseInt(num, 2)
                } else {

                    var code = '212' + this.checkTime(this.nowSel.index)
                    var data = {
                        equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
                        regAddress: code,
                        num: this.nowSel.value,
                    };
                    this.nowSel.index = -1
                    this.nowSel.value = 0
                    that.changeData(data);
                    this.changeBtn('212' + this.checkTime(index), dataNum)
                }
            }

        },
        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) {
            this.api.postControlWrite(data).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: res.data.msg,
                        type: "success",
                    });
                    // this.dataInit();

                } else {
                    this.$message.error(res.data.msg);
                }
                if (this.nowSel.index != -1) {
                    this.timer = null
                    this.nowSel.index = -1
                    this.nowSel.value = 0
                }

            });
        },
    },

}
</script>
<style lang="scss"></style>