feat: PLC地址配置 接口方式选项添加modbudRTU选中项,选中modbusRTU时添加数据位/停止位/校验方式表单

songshankun

2023-10-26 b7f85801605d9146399e9009f617be5d43165d46

feat: PLC地址配置 接口方式选项添加modbudRTU选中项,选中modbusRTU时添加数据位/停止位/校验方式表单

 src/views/set.vue

@@ -282,42 +282,123 @@
                  style="width: 100%"
                >
                  <el-option label="modbusTCP" value="modbusTCP"></el-option>
                  <el-option label="serial" value="serial"></el-option>
                  <el-option label="串口" value="serial"></el-option>
                  <el-option label="modbusRTU" value="modbusRTU"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="波特率"
                prop="baudRate"
                v-if="form.method == 'serial'"
                class="form-item float_right"
              >
                <el-input
                  v-model="form.baudRate"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="串口名称"
                prop="serialName"
                v-if="form.method == 'serial'"
                class="form-item float_right"
              >
                <el-input
                  v-model="form.serialName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="PLC地址"
                v-if="form.method == 'modbusTCP'"
                prop="address"
                class="form-item float_right"
              >
                <el-input
                  v-model="form.address"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <template v-if="form.method === 'modbusTCP'">
                <el-form-item
                  label="PLC地址"
                  prop="address"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.address"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="端口号"
                  prop="port"
                  class="form-item float_right"
                >
                  <el-input
                    v-model.number="form.port"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>

              <template v-if="form.method === 'serial'">
                <el-form-item
                  label="波特率"
                  prop="baudRate"

                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.baudRate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="串口名称"
                  prop="serialName"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.serialName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>

              <template v-if="form.method === 'modbusRTU'">
                <el-form-item
                  label="数据位"
                  prop="dataBit"
                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.dataBit"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="停止位"
                  prop="stopBit"
                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.stopBit"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>

                <el-form-item label="校验方式" prop="parity" class="form-item">
                  <el-select
                    v-model="form.parity"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="奇校验" :value="1"></el-option>
                    <el-option label="偶校验" :value="2"></el-option>
                    <el-option label="无校验" :value="3"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="波特率"
                  prop="baudRate"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.baudRate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="串口名称"
                  prop="serialName"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.serialName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>


              <!-- <el-form-item label="端口名称" prop="portName" class="form-item2">
                <el-select
                  v-model="form.portName"
@@ -333,17 +414,6 @@
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item
                label="端口号"
                prop="port"
                v-if="form.method == 'modbusTCP'"
                class="form-item float_right"
              >
                <el-input
                  v-model.number="form.port"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
            <!-- <el-button
              style="margin-bottom: 10px; float: right"
@@ -511,8 +581,13 @@
        portName: "",
        port: "",
        address: "",
        baudRate:'',
        // 波特率默认9600
        baudRate: 0,
        serialName:'',
        dataBit: 0,
        stopBit: 0,
        // 校验方式 1奇校验2偶校验3无校验
        parity: 3,
      },

      rules: {
@@ -657,6 +732,14 @@
      getPlc().then((res) => {
        if (res.code == 200) {
          this.form = JSON.parse(JSON.stringify(res.data));
          this.form = {
            ...this.form,
            dataBit: this.form?.dataBit || 0,
            stopBit: this.form?.stopBit || 0,
            parity: this.form?.parity || 3,
            baudRate: this.form?.baudRate || 0,
          }
          console.log('f',this.form)
          this.pclList = res.data.details
            ? JSON.parse(JSON.stringify(res.data.details))
            : [];
@@ -907,7 +990,32 @@

    saveThree() {
      let params = JSON.parse(JSON.stringify(this.form));
      params.details = this.pclList;
      params = {
        ...params,
        details : this.pclList,
        dataBit: +params.dataBit,
        stopBit: +params.stopBit,
        parity: +params.parity,
        baudRate: +params.baudRate
      }

      if (params.method === 'modbusRTU'){
        if (!params.dataBit){
          this.$message.error("数据位不能为 0")
          return
        }

        if (!params.stopBit){
          this.$message.error("停止位不能为 0")
          return
        }

        if (!params.baudRate){
          this.$message.error("波特率不能为 0")
          return
        }
      }

      setPlc(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("PLC配置成功！");