songshankun
2023-11-22 f6739d7542be48f7f8139c3d5fc7b2326e5cfc8d
src/views/set.vue
@@ -8,7 +8,7 @@
    </div>
    <div class="form-content-box">
      <div class="form-box-l">
        <div class="form-box-l-item">
        <!-- <div class="form-box-l-item">
          <el-button
            type="primary"
            @click="buttonClick(1)"
@@ -17,7 +17,7 @@
          >
            网络配置</el-button
          >
        </div>
        </div> -->
        <!-- <div class="form-box-l-item">
          <el-button
            type="primary"
@@ -28,7 +28,7 @@
            加入集群</el-button
          >
        </div> -->
        <div class="form-box-l-item">
        <!-- <div class="form-box-l-item">
          <el-button
            type="primary"
            @click="buttonClick(3)"
@@ -37,7 +37,7 @@
          >
            PLC配置</el-button
          >
        </div>
        </div> -->
      </div>
      <div class="form-box-r">
        <el-form
@@ -236,18 +236,20 @@
            </el-form-item>
          </div>
          <div style="height: 100%" v-if="active == 3">
            <div class="form-box-r-title" >PLC地址配置</div>
            <div
              style="
                overflow: auto;
                width: 100%;
                min-height: 180px;
                width: 80%;
                min-height: 200px;
                padding-right: 10px;
                margin:60px auto 0;
              "
            >
              <el-form-item
                label="PLC品牌"
                prop="brand"
                class="form-item2 float_left"
                class="form-item float_left"
              >
                <!-- style="width: calc(100% - 30px)" -->
                <el-select
@@ -270,7 +272,7 @@
                ></i> -->
              </el-form-item>
              <el-form-item label="接口方式" prop="method" class="form-item2">
              <el-form-item label="接口方式" prop="method" class="form-item">
                <!-- <el-input v-model="form.method" placeholder="请输入"></el-input> -->
                <el-select
                  v-model="form.method"
@@ -280,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-item2 float_right margin_left_10px"
              >
                <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-item2 float_right margin_left_10px"
              >
                <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-item2 float_right margin_left_10px"
              >
                <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"
@@ -331,19 +414,8 @@
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item
                label="端口号"
                prop="port"
                v-if="form.method == 'modbusTCP'"
                class="form-item2 float_right"
              >
                <el-input
                  v-model.number="form.port"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
            <el-button
            <!-- <el-button
              style="margin-bottom: 10px; float: right"
              @click="addPreProduction"
              type="primary"
@@ -392,7 +464,6 @@
              </el-table-column>
              <el-table-column prop="type" label="数据类型" width="120">
                <template slot-scope="scope">
                  <!--  :popper-append-to-body="false" -->
                  <el-select
                    v-if="scope.row.edit"
                    v-model="scope.row.type"
@@ -420,7 +491,7 @@
                    <el-option label="完成量" :value="1"></el-option>
                    <el-option label="总量" :value="2"></el-option>
                  </el-select>
                  <span v-else>{{ scope.row.fieldName }}</span>
                  <span v-else>{{ scope.row.fieldName==1?'完成量':'总量' }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
@@ -444,7 +515,7 @@
                  </span>
                </template>
              </el-table-column>
            </el-table>
            </el-table> -->
          </div>
        </el-form>
@@ -494,7 +565,7 @@
  props: {},
  data() {
    return {
      active: 1,
      active: 3,
      form: {
        isRequired: false,
        dns: "",
@@ -510,8 +581,13 @@
        portName: "",
        port: "",
        address: "",
        baudRate:'',
        // 波特率默认9600
        baudRate: 0,
        serialName:'',
        dataBit: 0,
        stopBit: 0,
        // 校验方式 1奇校验2偶校验3无校验
        parity: 3,
      },
      rules: {
@@ -570,7 +646,7 @@
    };
  },
  mounted() {
    this.getnetworkCardList();
    this.buttonClick(this.active)
  },
  watch: {},
  methods: {
@@ -656,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))
            : [];
@@ -906,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配置成功!");
@@ -954,7 +1063,7 @@
    margin: 30px 0 0 40px;
  }
  .height_100 {
    height: calc(100% - 90px);
    height: calc(100% - 120px);
  }
  .el-form {
    width: 100%;
@@ -1013,7 +1122,7 @@
  // position:absolute;
  // left:10px;
  // bottom:20px;
  margin-top: 40px;
  margin-top: 0px;
  float: right;
}