添加断开连接的按钮

guoshilong

2023-03-22 e0f9517f4b60d253b46abb20feb15d23ebaf32bc

添加断开连接的按钮

 src/views/funcController.vue

@@ -1,6 +1,11 @@
<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="menuChange(data)">
        {{ data.name }}
@@ -47,6 +52,7 @@
      option:{
        emptyBtn:false,
        submitText: "连接",
        submitBtn:false,
        menuSpan: 1,
        column:[
          {
@@ -81,6 +87,7 @@
      },
      menuList:[],
      currentClick:{},
      socketIoClient:null,
    }
  },
  mounted() {
@@ -102,9 +109,6 @@
    },
    //连接
    connect(form,done){
      // if (this.socketIoClient !=null ){
      //   this.socketIoClient.disconnect()
      // }
      let serveUri = 'http://192.168.0.200:10246'
      let params = {
        current :form.controllerEquipmentCode
@@ -127,6 +131,7 @@
          getAll(params).then(res=>{
            if (res.data.code == 200){
              this.menuList = res.data.data
              this.$notify.success({title:"连接成功"})
            }
          })
        }
@@ -138,6 +143,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:"断开失败"})
        }
      }
    },
  }
}
</script>

 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">
          <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>
@@ -119,6 +123,7 @@
        menuSpan: 6,
        emptyBtn: false,
        submitText: '连接',
        submitBtn:false,
        column: [
          {
            label: "显示设备",
@@ -249,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()
    },