添加断开连接的按钮

guoshilong

2023-03-22 e0f9517f4b60d253b46abb20feb15d23ebaf32bc

 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:"断开失败"})
        }
      }
    },
  }
}