wszhyWx/src/views/page/forceOutput.vue

<template>
  <div class="forceOutput">
    <div class="table-title">
      <img src="../../assets/img/forceOutput.png" alt="" />{{$t('forceOutput.title')}}
    </div>
    <div class="title-tips"> {{$t('forceOutput.testModeSelection')}}</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 ? $t('forceOutput.testMode') : $t('forceOutput.nonTestMode')}}
        </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-w70 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: [[], [], [], []],
      loading: null,
    };
  },
  watch: {
    "$store.state.equipmentIndex"(newVal, oldVal) {
      this.dataInit();
    },
  },
  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() {
      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 = {
        deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
      };
      this.api.forceChannelOutput(data).then((res) => {
        this.loading.close();
        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>