socketio连接调整,显示页添加表单校验；控制页添加表单校验，显示设备改为下拉框

guoshilong

2023-03-20 84001b5d34d3344f2fa40126877c4903dd10f1f3

 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()