wszhyWx/src/views/page/PIDSet.vue

<template>
  <div class="formula irrigateSet PIDSet">
    <set-params></set-params>
    <div class="page-content ">
      <div class="table-title">
        <img src="../../assets/image/set.png" alt=""> 厂家内部 PID 设置
      </div>
      <div class="flex-view">
        <div class="PIDSet-view">
          <div class="page-title PIDSet-title">
            PH参数设置
          </div>
          <div class="PID-input-content">
            <div class="PID-input">
              <div>
                比例系数(P)
              </div>
              <input @blur="blurChange('0', $event)"
              v-model="inputData['0']" @input="change('0', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                积分系数(I)
              </div>
              <input @blur="blurChange('1', $event)" v-model="inputData['1']" @input="change('1', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                微分系数(D)
              </div>
              <input @blur="blurChange('2', $event)" v-model="inputData['2']" @input="change('2', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                积分限制
              </div>
              <input @blur="blurChange('3', $event)" v-model="inputData['3']" @input="change('3', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                PWM周期
              </div>
              <input @blur="blurChange('4', $event)" v-model="inputData['4']" @input="change('4', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                计算周期
              </div>
              <input @blur="blurChange('11', $event)" v-model="inputData['11']" @input="change('11', $event)" type="number" placeholder="0.0">
            </div>
          </div>
        </div>
        <div class="PIDSet-view">
          <div class="page-title PIDSet-title">
            EC参数设置
          </div>
          <div class="PID-input-content">
            <div class="PID-input">
              <div>
                比例系数(P)
              </div>
              <input @blur="blurChange('5', $event)" v-model="inputData['5']" @input="change('5', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                积分系数(I)
              </div>
              <input @blur="blurChange('6', $event)" v-model="inputData['6']" @input="change('6', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                微分系数(D)
              </div>
              <input @blur="blurChange('7', $event)" v-model="inputData['7']" @input="change('7', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                积分限制
              </div>
              <input @blur="blurChange('8', $event)" v-model="inputData['8']" @input="change('8', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                PWM周期
              </div>
              <input @blur="blurChange('9', $event)" v-model="inputData['9']" @input="change('9', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input">
              <div>
                计算周期
              </div>
              <input @blur="blurChange('12', $event)" v-model="inputData['12']" @input="change('12', $event)" type="number" placeholder="0.0">
            </div>
          </div>
        </div>
        <div class="PIDSet-view">
          <div class="PID-input-content-full">
            <div class="PID-input-full">
              <div>
                吸酸指定通道
              </div>
              <input @blur="blurChange('10', $event)" v-model="inputData['10']" @input="change('10', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input-full">
              <div>
                供水泵提前启动时间(s)
              </div>
              <input @blur="blurChange('13', $event)" v-model="inputData['13']" @input="change('13', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input-full">
              <div>
                出水流量脉冲(P/L)
              </div>
              <input @blur="blurChange('14', $event)" v-model="inputData['14']" @input="change('14', $event)" type="number" placeholder="0.0">
            </div>
            <div class="PID-input-full">
              <div>
                旁通灌溉阀
              </div>
              <input @blur="blurChange('15', $event)" v-model="inputData['15']" @input="change('15', $event)" type="number" placeholder="0.0">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import setParams from '../../components/setParams.vue';
export default {
  components: {
    setParams
  },
  data() {
    return {
      inputData: []
    }
  },
  mounted() { 
    this.dataInit()
      //input获取焦点后全选
    let inputList = document.querySelectorAll('input');
   for (let index = 0; index < inputList.length; index++) {
     inputList[index].onfocus = this.selectValue;//input放入焦点，全选文本
   }
     },
  methods: {
    dataInit() {
      var store = this.$store.state
      var data = {
        equipmentId: store.equipmentList[store.equipmentIndex - 1].deviceId,
        pattern: 0, //需要根据文档填写 //6目标ph-数值
        regNum: 16,
      };
      this.api.postReg(data).then((res) => {
        if (res.data.code == 200) {
          this.inputData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
        //全选文本
selectValue(e) {
	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(this.timer){
        this.timer && clearInterval(this.timer);
      this.changeData(data);
     }
     
    },
    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.postWriteFs(data).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.dataInit();
        } else {
          this.$message.error("请求出错");
        }
               this.timer=null
      });
    },
  },

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