From 84001b5d34d3344f2fa40126877c4903dd10f1f3 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Mon, 20 Mar 2023 17:10:04 +0800
Subject: [PATCH] socketio连接调整,显示页添加表单校验；控制页添加表单校验，显示设备改为下拉框
---
src/views/funcController.vue | 100 ++++++++++++++++--------
src/views/funcView.vue | 85 +++++++++++----------
2 files changed, 110 insertions(+), 75 deletions(-)
diff --git a/src/views/funcController.vue b/src/views/funcController.vue
index 540f690..e3b483b 100644
--- a/src/views/funcController.vue
+++ b/src/views/funcController.vue
@@ -1,6 +1,6 @@
<template>
<div>
- <avue-form ref="form" v-model="form" :option="option" @submit="getMenuList"></avue-form>
+ <avue-form ref="form" v-model="form" :option="option" @submit="connect"></avue-form>
<div class="menu-btn-group">
<el-button size="small" v-for="data in menuList" :index="data.id" :key="data.id" @click="menuChange(data)">
{{ data.name }}
@@ -18,26 +18,64 @@
<script>
import {getAll} from "@/api/modules/function";
import io from "socket.io-client";
+import {getAllEq} from "@/api/equipment/equipment";
export default {
name: "funcController",
data() {
+ //设备编码校验
+ var equipmentList = []
+ getAllEq().then(res=>{
+ equipmentList = res.data.data
+ })
+ let validateEquipment = (rule, value, callback) => {
+ if (value) {
+ let filterArray = equipmentList.filter(e=>{
+ return e.code == value && e.type == 1
+ })
+ if (filterArray.length>0){
+ callback()
+ }else {
+ callback(new Error("请输入正确的控制器设备码"))
+ }
+ } else {
+ callback(new Error('请输入设备码'));
+ }
+ };
return {
form:{},
option:{
emptyBtn:false,
submitText: "连接",
- menuSpan: 6,
+ menuSpan: 1,
column:[
{
- label:"当前设备",
- prop:"currentDevice",
+ label:"控制器设备编码",
+ labelWidth:150,
+ prop:"controllerEquipmentCode",
span:6,
+ rules: [{
+ required: true,
+ trigger: "blur",
+ validator:validateEquipment,
+ }],
},
{
- label:"控制模块",
- prop:"modulesId",
+ label:"显示器设备编码",
+ labelWidth:150,
+ prop:"viewEquipmentCode",
span:6,
+ type: "select",
+ dicUrl: `/api/equipment/equipment/all?type=2`,
+ props: {
+ label: "code",
+ value: "code"
+ },
+ rules: [{
+ required: true,
+ message: "请选择显示器",
+ trigger: "blur",
+ }],
},
]
},
@@ -48,65 +86,57 @@
mounted() {
},
created() {
- this.connect()
},
methods: {
- getMenuList(form,done){
- this.sendMsg("putInClientMap",null)
- done()
- },
menuChange(data){
this.currentClick = data
this.sendMsg("menuChange",data.id)
},
sendMsg(msgName,data) {
let msg = {
- current:this.form.currentDevice,
- target:this.form.modulesId,
+ current:this.form.controllerEquipmentCode,
+ target:this.form.viewEquipmentCode,
msg :data
}
this.socketIoClient.emit(msgName,JSON.stringify(msg))
},
- connect(){
-
- // if (this.socketIoClient != null){
+ //连接
+ connect(form,done){
+ // if (this.socketIoClient !=null ){
// this.socketIoClient.disconnect()
- // this.socketIoClient = null
// }
-
let serveUri = 'http://192.168.0.200:10246'
- // let params={
- // modulesId:form.modulesId,
- // controllerId : form.currentDevice,
- // isView:false
- // }
-
+ let params = {
+ current :form.controllerEquipmentCode
+ }
this.socketIoClient = io.connect(serveUri, {
- // 'force new connection': true,
- // 'query': 'connectInfo=' + JSON.stringify(params)
+ 'force new connection': true,
+ 'query': 'connectInfo=' + JSON.stringify(params)
});
-
//监听与服务器的连接状态
this.socketIoClient.on("connect",()=>{
- // done()
+ done()
})
-
//监听服务器发回的消息
//连接成功
this.socketIoClient.on("connectOk", (res) => {
- this.menuList = res.data
- this.$notify.success({
- title: '连接成功',
- });
+ if (res.code == 200){
+ let params = {
+ equipmentCode :form.viewEquipmentCode
+ }
+ getAll(params).then(res=>{
+ if (res.data.code == 200){
+ this.menuList = res.data.data
+ }
+ })
+ }
});
-
//连接失败
this.socketIoClient.on("connectError", (res) => {
this.$notify.error({
title: res.msg,
});
});
-
},
}
}
diff --git a/src/views/funcView.vue b/src/views/funcView.vue
index 0a8d1a1..04749d1 100644
--- a/src/views/funcView.vue
+++ b/src/views/funcView.vue
@@ -3,8 +3,8 @@
<el-row>
<el-col :span="4">
<div class="search">
- <avue-form :option="option" v-model="form" @submit="getMenuList">
- <template slot-scope="{}" slot="modulesIdLabel">
+ <avue-form :option="option" v-model="form" @submit="connect">
+ <template slot-scope="{}" slot="equipmentCodeLabel">
<span></span>
</template>
</avue-form>
@@ -88,11 +88,31 @@
import MinusIcon from 'vue-material-design-icons/MinusCircle'
import io from "socket.io-client";
import {getDetail} from "@/api/modules/modules";
+import {getAllEq} from "@/api/equipment/equipment";
export default {
name: "funcView",
components: {Flipbook, LeftIcon, RightIcon, PlusIcon, MinusIcon},
data() {
+ //设备编码校验
+ var equipmentList = []
+ getAllEq().then(res=>{
+ equipmentList = res.data.data
+ })
+ let validateEquipment = (rule, value, callback) => {
+ if (value) {
+ let filterArray = equipmentList.filter(e=>{
+ return e.code == value && e.type == 2
+ })
+ if (filterArray.length>0){
+ callback()
+ }else {
+ callback(new Error("请输入正确的显示器设备码"))
+ }
+ } else {
+ callback(new Error('请输入设备码'));
+ }
+ };
return {
form: {},
option: {
@@ -101,16 +121,16 @@
submitText: '连接',
column: [
{
- label: "模块id",
+ label: "显示设备",
labelWidth: 15,
- prop: "modulesId",
+ prop: "equipmentCode",
type: "input",
span: 16,
labelslot: true,
rules: [{
required: true,
- message: "请输入模块id",
- trigger: "blur"
+ trigger: "blur",
+ validator:validateEquipment,
}],
},
]
@@ -133,7 +153,6 @@
}
},
created() {
- this.connect()
},
mounted() {
},
@@ -174,38 +193,38 @@
}
},
+ connect(form,done) {
- connect() {
-
- // if (this.socketIoClient != null){
+ // if (this.socketIoClient !=null ){
// this.socketIoClient.disconnect()
- // this.socketIoClient = null
// }
-
let serveUri = 'http://192.168.0.200:10246'
- // let params = {
- // modulesId: form.modulesId,
- // isView: true
- // }
-
+ let params = {
+ current :form.equipmentCode
+ }
this.socketIoClient = io.connect(serveUri, {
- // 'force new connection': true,
- // 'query': 'connectInfo=' + JSON.stringify(params)
+ 'force new connection': true,
+ 'query': 'connectInfo=' + JSON.stringify(params)
});
-
//监听与服务器的连接状态
this.socketIoClient.on("connect", () => {
- // done()
+ done()
})
-
//监听服务器发回的消息
//连接成功
this.socketIoClient.on("connectOk", (res) => {
- this.menuList = res.data
- this.$notify.success({
- title: '连接成功',
- });
+ if (res.code == 200){
+ let params = {
+ equipmentCode :form.equipmentCode
+ }
+ getAll(params).then(res=>{
+ if (res.data.code == 200){
+ this.menuList = res.data.data
+ this.$notify.success({title:"连接成功"})
+ }
+ })
+ }
});
//连接失败
@@ -216,33 +235,19 @@
});
this.socketIoClient.on("menuChange", (res) => {
- console.log(res)
this.handleSelect(res)
});
//上一页
this.socketIoClient.on("previousPage", (res) => {
- console.log(res)
this.left()
});
//下一页
this.socketIoClient.on("nextPage", (res) => {
- console.log(res)
this.right()
});
- },
- getMenuList(form,done){
- this.sendMsg("putInClientMap",null)
- done()
- },
- sendMsg(msgName,data){
- let msg = {
- current:this.form.modulesId,
- msg :data
- }
- this.socketIoClient.emit(msgName,JSON.stringify(msg))
},
left() {
this.$refs.flipbook.flipLeft()
--
Gitblit v1.9.3