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: [],
      loading:null,
    }
  },

  mounted() { 
    this.loading = this.$loading({
    lock: true,
    text: '加载中',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
    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) => {
        this.loading.close()
        if (res.data.code == 200) {
          this.inputData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
     //全选文本
     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);
    //  }
     
    },
    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.postWriteFs(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>