wszhyWx/src/views/page/forceOutput.vue

<template>
    <div class="forceOutput">
        <div class="table-title">
            <img src="../../assets/img/forceOutput.png" alt="">强制输出参数
        </div>
        <div class="title-tips">
            测试模式选择
        </div>
        <div class="flex-view">
            <div class="input-btn ">
                <div class="btn blue" @click="changeOpen()" :class="inputData[20600] == 1 ? 'blue' : 'green'">
                    <img src="../../assets/image/irrigateSet2.png" alt="" />{{inputData[20600] == 1 ? '测试模式' : '非测试模式'}}
                </div>
            </div>
        </div>
        <div class="flex-view">
            <div class="input-btn flex-warp">
                <template v-for="item,index in pageList">
                    <div  @click="changeType(index, index1)" class="btn btn-w80 m-b-20" :class="item1==1?'blue':'off'" v-for="item1,index1 in item" :key="(index*16)+index1+1">
                   {{(index*16)+index1+1}}#
                </div>
                </template>
               
            </div>
        </div>
    </div>
  </template>
  <script>
  export default {
    data(){
        return {
            inputData: [],
            nowSel: {
                index: -1,
                value: 0,
            },
            pageList:[[],[],[],[]]
        }
    },
    mounted(){
        this.dataInit()
    },
    methods:{
          // 工作方式选择
          changeOpen() {
            if(this.inputData[20600]==0){
                this.inputData[20600]=1
            }else{
                this.inputData[20600]=0
            }
            var dataNum = {
                target: {
                    value: this.inputData[20600],
                },
            };
            this.changeBtn(20600, dataNum);
        },
        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.forceChannelOutput(data).then((res) => {
                if (res.data.code == 200) {
                    this.inputData = res.data.data;
                    this.pageList.forEach((el, index) => {
                        this.pageList[index] = this.getList(this.inputData[20601 + 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.pageList[index][index1] == '1') {
                this.pageList[index][index1] = '0'
            } else {
                this.pageList[index][index1] = '1'
            }
            this.$forceUpdate();
            var num = this.myReverse(this.pageList[index]).join("");
            var dataNum = {
                target: {
                    value: parseInt(num, 2),
                },
            };

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

                    var code = 20601 + 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(20601 + 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>