From e0f9517f4b60d253b46abb20feb15d23ebaf32bc Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Wed, 22 Mar 2023 16:31:34 +0800
Subject: [PATCH] 添加断开连接的按钮
---
src/views/funcController.vue | 138 +++++++++++++++++++++++++++++++---------------
1 files changed, 93 insertions(+), 45 deletions(-)
diff --git a/src/views/funcController.vue b/src/views/funcController.vue
index e2f4990..62569ab 100644
--- a/src/views/funcController.vue
+++ b/src/views/funcController.vue
@@ -1,15 +1,20 @@
<template>
<div>
- <avue-form ref="form" v-model="form" :option="option" @submit="connect"></avue-form>
+ <avue-form ref="form" v-model="form" :option="option" @submit="connect">
+ <template slot-scope="{size}" slot="menuForm">
+ <el-button v-if="!socketIoClient" type="primary" :size="size" @click="$refs.form.submit()">连 接</el-button>
+ <el-button v-if="socketIoClient" type="danger" :size="size" @click="disconnect">断 开</el-button>
+ </template>
+ </avue-form>
<div class="menu-btn-group">
- <el-button size="small" v-for="data in menuList" :index="data.id" :key="data.id" @click="changeMenu(data)">
+ <el-button size="small" v-for="data in menuList" :index="data.id" :key="data.id" @click="menuChange(data)">
{{ data.name }}
</el-button>
</div>
<div class="action-btn-group">
<div class="img-btn" v-if="currentClick.property == 2 && currentClick.type == 2">
- <el-button size="small" @click="previousPage">上一张</el-button>
- <el-button size="small" @click="nextPage">下一张</el-button>
+ <el-button size="small" @click="sendMsg('changeImgPage','previous')">上一张</el-button>
+ <el-button size="small" @click="sendMsg('changeImgPage','next')">下一张</el-button>
</div>
</div>
</div>
@@ -18,95 +23,138 @@
<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,
+ submitBtn:false,
+ menuSpan: 1,
column:[
{
- label:"控制模块",
- prop:"modulesId",
+ label:"控制器设备编码",
+ labelWidth:150,
+ prop:"controllerEquipmentCode",
span:6,
+ rules: [{
+ required: true,
+ trigger: "blur",
+ validator:validateEquipment,
+ }],
},
{
- label:"当前设备",
- prop:"currentDevice",
+ 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",
+ }],
+ },
]
},
menuList:[],
currentClick:{},
+ socketIoClient:null,
}
},
mounted() {
},
+ created() {
+ },
methods: {
- handleSubmit(form,done){
- this.getMenuList()
- done()
- },
- getMenuList(){
- let params = {
- modulesId : this.form.modulesId
- }
- getAll(params).then(res=>{
- if (res.data.code == 200){
- let data = res.data.data
- this.menuList = data
- }
- })
- },
- changeMenu(data){
+ menuChange(data){
this.currentClick = data
- this.socketIoClient.emit('menuChange',data.id)
+ this.sendMsg("menuChange",data.id)
},
- previousPage(){
- this.socketIoClient.emit('changeImgPage','previous')
+ sendMsg(msgName,data) {
+ let msg = {
+ current:this.form.controllerEquipmentCode,
+ target:this.form.viewEquipmentCode,
+ msg :data
+ }
+ this.socketIoClient.emit(msgName,JSON.stringify(msg))
},
- nextPage(){
- this.socketIoClient.emit('changeImgPage','next')
- },
+ //连接
connect(form,done){
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)
});
-
//监听与服务器的连接状态
this.socketIoClient.on("connect",()=>{
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.$notify.success({title:"连接成功"})
+ }
+ })
+ }
});
-
//连接失败
this.socketIoClient.on("connectError", (res) => {
this.$notify.error({
title: res.msg,
});
});
-
+ },
+ disconnect() {
+ console.log(this.socketIoClient)
+ if (this.socketIoClient != null){
+ this.socketIoClient.disconnect()
+ this.menuList = []
+ if (this.socketIoClient.disconnected){
+ this.socketIoClient = null
+ this.$notify.success({title:"断开成功"})
+ }else {
+ this.$notify.error({title:"断开失败"})
+ }
+ }
},
}
}
--
Gitblit v1.9.3