面板的 plc配置修改 接口方式 修改为 select

haoxuan

2023-08-24 c808e94275da459e072027a44dee5f82638fb870

面板的 plc配置修改  接口方式 修改为 select

 src/views/set.vue

@@ -42,7 +42,7 @@
      <div class="form-box-r">
        <el-form
          ref="form"
          :class="active == 3?'height_100':''"
          :class="active == 3 ? 'height_100' : ''"
          :rules="rules"
          :model="form"
          label-width="120px"
@@ -74,7 +74,7 @@
                  line-height: 40px;
                  display: inline-block;
                "
                :disabled="item.ip?false:true"
                :disabled="item.ip ? false : true"
                @change="switchChange(item, index, item.status)"
                v-model="item.status"
              >
@@ -96,7 +96,7 @@
            <el-form-item label="配置方式" prop="isRequired">
              <el-radio-group v-model="form.isRequired">
                <!-- <el-radio :label="true">自动匹配</el-radio> -->
                <el-radio :label="false">手动配置</el-radio>
                <el-radio label="false">手动配置</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
@@ -235,7 +235,7 @@
              >
            </el-form-item>
          </div>
          <div style="height:100%;" v-if="active == 3">
          <div style="height: 100%" v-if="active == 3">
            <div
              style="
                overflow: auto;
@@ -249,7 +249,7 @@
                prop="brand"
                class="form-item2 float_left"
              >
              <!-- style="width: calc(100% - 30px)" -->
                <!-- style="width: calc(100% - 30px)" -->
                <el-select
                  placeholder="请选择PLC品牌"
                  v-model="form.brand"
@@ -271,10 +271,43 @@
              </el-form-item>

              <el-form-item label="接口方式" prop="method" class="form-item2">
                <el-input v-model="form.method" placeholder="请输入"></el-input>
                <!-- <el-input v-model="form.method" placeholder="请输入"></el-input> -->
                <el-select
                  v-model="form.method"
                  placeholder="请选择"
                  filterable
                  clearable
                  style="width: 100%"
                >
                  <el-option label="modbusTCP" value="modbusTCP"></el-option>
                  <el-option label="serial" value="serial"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="PCL地址"
                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"
              >
@@ -283,7 +316,7 @@
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item label="端口名称" prop="portName" class="form-item2">
              <!-- <el-form-item label="端口名称" prop="portName" class="form-item2">
                <el-select
                  v-model="form.portName"
                  placeholder="全部"
@@ -297,11 +330,12 @@
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              </el-form-item> -->
              <el-form-item
                label="端口号"
                prop="port"
                class="form-item2 float_right margin_left_10px"
                v-if="form.method == 'modbusTCP'"
                class="form-item2 float_right"
              >
                <el-input
                  v-model.number="form.port"
@@ -310,117 +344,110 @@
              </el-form-item>
            </div>
            <el-button
            style="margin-bottom: 10px; float: right"
            @click="addPreProduction"
            type="primary"
            icon="el-icon-plus"
            >添加</el-button
          >
          <el-table
            ref="multipleTable"
            :header-cell-style="{
              background: '#f1f3f8',
              color: '#000009',
            }"
            :data="pclList"
            tooltip-effect="dark"
            height="calc(100% - 230px)"
            style="width: 100%; padding: 0"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="startAddress"
              label="数量起始地址"
              width="180"
              style="margin-bottom: 10px; float: right"
              @click="addPreProduction"
              type="primary"
              icon="el-icon-plus"
              >添加</el-button
            >
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit"
                  v-model.number="scope.row.startAddress"
                  placeholder="请输入"
                ></el-input>
                <span v-else>{{ scope.row.startAddress }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="length" label="数据长度" width="120">
              <template slot-scope="scope">
                <el-input
                  v-if="scope.row.edit"
                  v-model.number="scope.row.length"
                  placeholder="请输入"
                ></el-input>
                <span v-else>{{ scope.row.length }}</span>
              </template>
            </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"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    v-for="item in plcNumTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <span v-else>{{ scope.row.type }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="fieldName" label="对应系统字段">
              <template slot-scope="scope">
                
                <el-select
                  v-if="scope.row.edit"
                  v-model="scope.row.fieldName"
                  placeholder="请选择"
                  filterable
                >
                  <el-option
                    label="完成量"
                    :value="1"
                  ></el-option>
                  <el-option
                    label="总量"
                    :value="2"
                  ></el-option>
                </el-select>
                <span v-else>{{ scope.row.fieldName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <span class="setColor" v-if="scope.row.edit">
                  <el-button
                    @click="saveClick(scope.row, scope)"
                    type="text"
                    size="small"
                    >保存</el-button
            <el-table
              ref="multipleTable"
              :header-cell-style="{
                background: '#f1f3f8',
                color: '#000009',
              }"
              :data="pclList"
              tooltip-effect="dark"
              height="calc(100% - 230px)"
              style="width: 100%; padding: 0"
            >
              <el-table-column
                type="index"
                label="序号"
                width="80"
              ></el-table-column>
              <el-table-column
                prop="startAddress"
                label="数量起始地址"
                width="180"
              >
                <template slot-scope="scope">
                  <el-input
                    v-if="scope.row.edit"
                    v-model.number="scope.row.startAddress"
                    placeholder="请输入"
                  ></el-input>
                  <span v-else>{{ scope.row.startAddress }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="length" label="数据长度" width="120">
                <template slot-scope="scope">
                  <el-input
                    v-if="scope.row.edit"
                    v-model.number="scope.row.length"
                    placeholder="请输入"
                  ></el-input>
                  <span v-else>{{ scope.row.length }}</span>
                </template>
              </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"
                    placeholder="请选择"
                    filterable
                  >
                    <el-option
                      v-for="item in plcNumTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <span v-else>{{ scope.row.type }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="fieldName" label="对应系统字段">
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.edit"
                    v-model="scope.row.fieldName"
                    placeholder="请选择"
                    filterable
                  >
                    <el-option label="完成量" :value="1"></el-option>
                    <el-option label="总量" :value="2"></el-option>
                  </el-select>
                  <span v-else>{{ scope.row.fieldName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <span class="setColor" v-if="scope.row.edit">
                    <el-button
                      @click="saveClick(scope.row, scope)"
                      type="text"
                      size="small"
                      >保存</el-button
                    >

                  <el-button type="text" size="small" @click="cancel(scope)"
                    >取消</el-button
                  >
                </span>
                <span v-else>
                  <el-button @click="dellist(scope)" type="text" size="small"
                    >删除</el-button
                  >
                </span>
              </template>
            </el-table-column>
          </el-table>
                    <el-button type="text" size="small" @click="cancel(scope)"
                      >取消</el-button
                    >
                  </span>
                  <span v-else>
                    <el-button @click="dellist(scope)" type="text" size="small"
                      >删除</el-button
                    >
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form>
        

        <div class="project-info-footer">
          <!-- <el-button @click="shutdown" style="margin-right: 50px"
            >取消</el-button
@@ -470,20 +497,21 @@
      active: 1,
      form: {
        isRequired: false,
        dns:'',
        gateway:'',
        id:'',
        ip:'',
        mask:'',
        networkCard:'',
        status:2,
        dns: "",
        gateway: "",
        id: "",
        ip: "",
        mask: "",
        networkCard: "",
        status: 2,

        brand:'',
          method:'',
            portName:'',
              port:'',
                address:'',
        
        brand: "",
        method: "modbusTCP",
        portName: "",
        port: "",
        address: "",
        baudRate:'',
        serialName:'',
      },

      rules: {
@@ -497,7 +525,7 @@
        ],
        brand: [{ required: false, message: "请选择", trigger: "change" }],
        method: [{ required: false, message: "请选择", trigger: "change" }],
       

        port: [
          {
            required: false,
@@ -547,7 +575,7 @@
  watch: {},
  methods: {
    validatorNum(rule, value, callback) {
      if(value){
      if (value) {
        if (value == undefined || value == null) {
          callback(new Error("请输入有效数字"));
        } else {
@@ -558,17 +586,17 @@
            callback();
          }
        }
      }else{
      } else {
        callback();
      }
      
    },
    getnetworkCardList() {
      NetworkCard().then((res) => {
        if (res.code == 200) {
          this.networkCardList = res.data;
          for(let i in this.networkCardList){
            this.networkCardList[i].status=this.networkCardList[i].status==1?true:false
          for (let i in this.networkCardList) {
            this.networkCardList[i].status =
              this.networkCardList[i].status == 1 ? true : false;
          }
        }
      });
@@ -607,8 +635,8 @@
        this.networkCardList[index].status = !status;
        return true;
      }
      this.form=JSON.parse(JSON.stringify(item));
      this.saveOne()
      this.form = JSON.parse(JSON.stringify(item));
      this.saveOne();
    },
    HomeClick() {
      this.$router.push({
@@ -618,20 +646,21 @@
    buttonClick(val) {
      this.active = val;
      if (this.active == 1) {
        this.isSetNet=false,
        this.getnetworkCardList();
        (this.isSetNet = false), this.getnetworkCardList();
      } else if (this.active == 3) {
        this.handleGetBomKindDictList();
        this.getPlcInfo()
        this.getPlcInfo();
      }
    },
    getPlcInfo(){
      getPlc().then(res=>{
        if(res.code==200){
          this.form=JSON.parse(JSON.stringify(res.data));
          this.pclList=res.data.details?JSON.parse(JSON.stringify(res.data.details)):[];
    getPlcInfo() {
      getPlc().then((res) => {
        if (res.code == 200) {
          this.form = JSON.parse(JSON.stringify(res.data));
          this.pclList = res.data.details
            ? JSON.parse(JSON.stringify(res.data.details))
            : [];
        }
      })
      });
    },
    // PLC配置设置
    handleShow() {
@@ -642,89 +671,88 @@
    handleGetBomKindDictList(val) {
      getMiniDictList().then((res) => {
        this.plcBrandList = res.data.data;
        this.plcBrandList=[
          
            {
              id:1,
              name:'三菱',
            },
            {
              id:2,
              name:'欧姆龙',
            },
            {
              id:3,
              name:'西门子',
            },
            {
              id:4,
              name:'台达',
            },
            {
              id:5,
              name:'和利时',
            },
            {
              id:6,
              name:'信捷',
            },
            {
              id:7,
              name:'南大傲拓',
            },
            {
              id:8,
              name:'汇川',
            },
            {
              id:9,
              name:'永宏',
            },
            {
              id:10,
              name:'罗克韦尔',
            },
            {
              id:11,
              name:'施耐德',
            },
            {
              id:12,
              name:'丰炜',
            },
            {
              id:13,
              name:'黄石科威',
            },
            {
              id:14,
              name:'霍尼韦尔',
            },
            {
              id:15,
              name:'艾默生',
            },
            {
              id:16,
              name:'英威腾',
            },
            {
              id:17,
              name:'基恩士',
            },
            {
              id:18,
              name:'中控',
            },
            {
              id:19,
              name:'倍福',
            },
            {
              id:20,
              name:'贝加莱',
            }
        ]
        this.plcBrandList = [
          {
            id: 1,
            name: "三菱",
          },
          {
            id: 2,
            name: "欧姆龙",
          },
          {
            id: 3,
            name: "西门子",
          },
          {
            id: 4,
            name: "台达",
          },
          {
            id: 5,
            name: "和利时",
          },
          {
            id: 6,
            name: "信捷",
          },
          {
            id: 7,
            name: "南大傲拓",
          },
          {
            id: 8,
            name: "汇川",
          },
          {
            id: 9,
            name: "永宏",
          },
          {
            id: 10,
            name: "罗克韦尔",
          },
          {
            id: 11,
            name: "施耐德",
          },
          {
            id: 12,
            name: "丰炜",
          },
          {
            id: 13,
            name: "黄石科威",
          },
          {
            id: 14,
            name: "霍尼韦尔",
          },
          {
            id: 15,
            name: "艾默生",
          },
          {
            id: 16,
            name: "英威腾",
          },
          {
            id: 17,
            name: "基恩士",
          },
          {
            id: 18,
            name: "中控",
          },
          {
            id: 19,
            name: "倍福",
          },
          {
            id: 20,
            name: "贝加莱",
          },
        ];
        if (val) {
          for (let i in this.plcBrandList) {
            if (this.plcBrandList[i].isDefault) {
@@ -856,11 +884,11 @@
    },
    saveOne() {
      let params = JSON.parse(JSON.stringify(this.form));
      params.status=params.status==1?1:2
      params.status = params.status == 1 ? 1 : 2;
      setworkCard(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("网络配置成功！");
          this.getnetworkCardList()
          this.getnetworkCardList();
        }
      });
    },
@@ -869,20 +897,20 @@
        if (valid) {
          if (this.active == 1) {
            this.saveOne();
          }else if(this.active == 3){
            this.saveThree()
          } else if (this.active == 3) {
            this.saveThree();
          }
        }
      });
    },
    

    saveThree() {
      let params = JSON.parse(JSON.stringify(this.form));
      params.details=this.pclList
      params.details = this.pclList;
      setPlc(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("PLC配置成功！");
          this.getPlcInfo()
          this.getPlcInfo();
        }
      });
    },
@@ -918,15 +946,15 @@
  margin-top: 100px;
}
.form-box {
  background: #12234A;
  background: #12234a;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  .form-box-t {
    margin: 30px 0 0 40px;
  }
  .height_100{
    height:calc(100% -  90px);
  .height_100 {
    height: calc(100% - 90px);
  }
  .el-form {
    width: 100%;