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/funcView.vue | 111 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 77 insertions(+), 34 deletions(-)
diff --git a/src/views/funcView.vue b/src/views/funcView.vue
index 5f5b177..5d322f2 100644
--- a/src/views/funcView.vue
+++ b/src/views/funcView.vue
@@ -3,9 +3,13 @@
<el-row>
<el-col :span="4">
<div class="search">
- <avue-form :option="option" v-model="form" @submit="connect">
- <template slot-scope="{}" slot="modulesIdLabel">
+ <avue-form ref="form" :option="option" v-model="form" @submit="connect">
+ <template slot-scope="{}" slot="equipmentCodeLabel">
<span></span>
+ </template>
+ <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>
@@ -87,29 +91,51 @@
import PlusIcon from 'vue-material-design-icons/PlusCircle'
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: {
menuSpan: 6,
emptyBtn: false,
submitText: '连接',
+ submitBtn:false,
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,
}],
},
]
@@ -131,18 +157,11 @@
socketIoClient: null,
}
},
+ created() {
+ },
mounted() {
},
methods: {
- handleSubmit(form, done) {
- getAll(form).then(res => {
- if (res.data.code == 200) {
- let data = res.data.data
- this.menuList = data
- done()
- }
- })
- },
handleSelect(index) {
let selectData = this.menuList.filter(e => {
return e.id == index
@@ -159,47 +178,58 @@
if (data.type == 2) {
let fileArray = data.fileUrl
this.flipConfig.pages = []
- fileArray.forEach(e => {
- this.flipConfig.pages.push(e.value)
- })
+ if (fileArray.length>0 && fileArray){
+ fileArray.forEach(e => {
+ this.flipConfig.pages.push(e.value)
+ })
+ }
} else if (data.type == 3) {
- url = data.fileUrl[0].value
- this.path = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ if (data.fileUrl&&data.fileUrl.length>0){
+ url = data.fileUrl[0].value
+ this.path = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ }
} else if (data.type == 1) {
- url = data.fileUrl[0].value
- this.path = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ if (data.fileUrl&&data.fileUrl.length>0){
+ url = data.fileUrl[0].value
+ this.path = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
+ }
}
} else if (data.property == 3) {
}
-
-
},
+ connect(form,done) {
- connect(form, done) {
+ // if (this.socketIoClient !=null ){
+ // this.socketIoClient.disconnect()
+ // }
+
let serveUri = 'http://192.168.0.200:10246'
let params = {
- modulesId: form.modulesId,
- isView: true
+ current :form.equipmentCode
}
-
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.equipmentCode
+ }
+ getAll(params).then(res=>{
+ if (res.data.code == 200){
+ this.menuList = res.data.data
+ this.$notify.success({title:"连接成功"})
+ }
+ })
+ }
});
//连接失败
@@ -224,6 +254,19 @@
});
},
+ 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:"断开失败"})
+ }
+ }
+ },
left() {
this.$refs.flipbook.flipLeft()
},
--
Gitblit v1.9.3