From f6739d7542be48f7f8139c3d5fc7b2326e5cfc8d Mon Sep 17 00:00:00 2001 From: songshankun <songshankun@foxmail.com> Date: 星期三, 22 十一月 2023 11:06:35 +0800 Subject: [PATCH] feat: 轮询plc时间调整; 接口报错时也轮询plc --- src/views/set.vue | 675 +++++++++++++++++++++++++++++++++---------------------- 1 files changed, 406 insertions(+), 269 deletions(-) diff --git a/src/views/set.vue b/src/views/set.vue index 0f89cc3..eea93c9 100644 --- a/src/views/set.vue +++ b/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,12 +37,12 @@ > PLC閰嶇疆</el-button > - </div> + </div> --> </div> <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,21 +235,23 @@ > </el-form-item> </div> - <div style="height:100%;" v-if="active == 3"> + <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)" --> + <!-- style="width: calc(100% - 30px)" --> <el-select placeholder="璇烽�夋嫨PLC鍝佺墝" v-model="form.brand" @@ -270,20 +272,134 @@ ></i> --> </el-form-item> - <el-form-item label="鎺ュ彛鏂瑰紡" prop="method" class="form-item2"> - <el-input v-model="form.method" placeholder="璇疯緭鍏�"></el-input> + <el-form-item label="鎺ュ彛鏂瑰紡" prop="method" class="form-item"> + <!-- <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="涓插彛" value="serial"></el-option> + <el-option label="modbusRTU" value="modbusRTU"></el-option> + </el-select> </el-form-item> - <el-form-item - label="PCL鍦板潃" - prop="address" - class="form-item2 float_right margin_left_10px" - > - <el-input - v-model="form.address" - placeholder="璇疯緭鍏�" - ></el-input> - </el-form-item> - <el-form-item label="绔彛鍚嶇О" prop="portName" class="form-item2"> + <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" placeholder="鍏ㄩ儴" @@ -297,130 +413,112 @@ :key="item.id" ></el-option> </el-select> - </el-form-item> - <el-form-item - label="绔彛鍙�" - prop="port" - class="form-item2 float_right margin_left_10px" - > - <el-input - v-model.number="form.port" - placeholder="璇疯緭鍏�" - ></el-input> - </el-form-item> + </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" + <!-- <el-button + 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"> + <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==1?'瀹屾垚閲�':'鎬婚噺' }}</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 @@ -467,23 +565,29 @@ props: {}, data() { return { - active: 1, + active: 3, 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: "", + // 娉㈢壒鐜囬粯璁�9600 + baudRate: 0, + serialName:'', + dataBit: 0, + stopBit: 0, + // 鏍¢獙鏂瑰紡 1濂囨牎楠�2鍋舵牎楠�3鏃犳牎楠� + parity: 3, }, rules: { @@ -497,7 +601,7 @@ ], brand: [{ required: false, message: "璇烽�夋嫨", trigger: "change" }], method: [{ required: false, message: "璇烽�夋嫨", trigger: "change" }], - + port: [ { required: false, @@ -542,12 +646,12 @@ }; }, mounted() { - this.getnetworkCardList(); + this.buttonClick(this.active) }, watch: {}, methods: { validatorNum(rule, value, callback) { - if(value){ + if (value) { if (value == undefined || value == null) { callback(new Error("璇疯緭鍏ユ湁鏁堟暟瀛�")); } else { @@ -558,17 +662,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 +711,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 +722,29 @@ 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.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)) + : []; } - }) + }); }, // PLC閰嶇疆璁剧疆 handleShow() { @@ -642,89 +755,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 +968,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 +981,45 @@ 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 = { + ...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閰嶇疆鎴愬姛锛�"); - this.getPlcInfo() + this.getPlcInfo(); } }); }, @@ -918,15 +1055,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% - 120px); } .el-form { width: 100%; @@ -985,7 +1122,7 @@ // position:absolute; // left:10px; // bottom:20px; - margin-top: 40px; + margin-top: 0px; float: right; } -- Gitblit v1.8.0