添加socket连接

guoshilong

2023-03-17 1e1cf2610d0d40eb337c4df0a4a03d18d4289ba4

添加socket连接

 src/router/page/index.js

@@ -11,7 +11,7 @@
    {
        path:"/controller",
        name:"controller",
        component: () => import( /* webpackChunkName: "views" */ '@/views/controller')
        component: () => import( /* webpackChunkName: "views" */ '@/views/funcController')
    },
    {
        path:"/socket",

 src/views/funcController.vue

New file
@@ -0,0 +1,117 @@
<template>
  <div>
    <avue-form ref="form" v-model="form" :option="option" @submit="connect"></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)">
        {{ 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>
      </div>
    </div>
  </div>
</template>

<script>
import {getAll} from "@/api/modules/function";
import io from "socket.io-client";

export default {
  name: "funcController",
  data() {
    return {
      form:{},
      option:{
        emptyBtn:false,
        submitText: "连接",
        menuSpan: 6,
        column:[
          {
            label:"控制模块",
            prop:"modulesId",
            span:6,
          },
          {
            label:"当前设备",
            prop:"currentDevice",
            span:6,
          }
        ]
      },
      menuList:[],
      currentClick:{},
    }
  },
  mounted() {
  },
  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){
      this.currentClick = data
      this.socketIoClient.emit('menuChange',data.id)
    },
    previousPage(){
      this.socketIoClient.emit('changeImgPage','previous')
    },
    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
      }

      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: '连接成功',
        });
      });

      //连接失败
      this.socketIoClient.on("connectError", (res) => {
        this.$notify.error({
          title: res.msg,
        });
      });

    },
  }
}
</script>

<style scoped>

</style>

 src/views/funcView.vue

@@ -3,7 +3,7 @@
    <el-row>
      <el-col :span="4">
        <div class="search">
          <avue-form :option="option" v-model="form" @submit="handleSubmit">
          <avue-form :option="option" v-model="form" @submit="connect">
            <template slot-scope="{}" slot="modulesIdLabel">
              <span></span>
            </template>
@@ -28,38 +28,50 @@
      </el-col>
      <el-col :span="20">
        <div class="show">
          <Flipbook v-if="viewType == 2" class="flipbook"
                    :pages="flipConfig.pages"
                    :startPage="flipConfig.pageNum"
                    v-slot="flipbook"
                    ref="flipbook">
            <div class="action-bar">
              <left-icon
                  class="btn left"
                  :class="{ disabled: !flipbook.canFlipLeft }"
                  @click="flipbook.flipLeft"
              />
              <plus-icon
                  class="btn plus"
                  :class="{ disabled: !flipbook.canZoomIn }"
                  @click="flipbook.zoomIn"
              />
              <span class="page-num">

          <div v-if="menu.property == 1">
            <img :src="menu.fileUrl[0].value"/>
          </div>

          <div v-if="menu.property == 2">
            <Flipbook v-if="menu.type == 2" class="flipbook"
                      :pages="flipConfig.pages"
                      :startPage="flipConfig.pageNum"
                      v-slot="flipbook"
                      ref="flipbook">
              <div class="action-bar">
                <left-icon
                    class="btn left"
                    :class="{ disabled: !flipbook.canFlipLeft }"
                    @click="left"
                />
                <plus-icon
                    class="btn plus"
                    :class="{ disabled: !flipbook.canZoomIn }"
                    @click="flipbook.zoomIn"
                />
                <span class="page-num">
          Page {{ flipbook.page }} of {{ flipbook.numPages }}
        </span>
              <minus-icon
                  class="btn minus"
                  :class="{ disabled: !flipbook.canZoomOut }"
                  @click="flipbook.zoomOut"
              />
              <right-icon
                  class="btn right"
                  :class="{ disabled: !flipbook.canFlipRight }"
                  @click="flipbook.flipRight"
              />
            </div>
          </Flipbook>
          <iframe v-if="viewType == 3" class="view-iframe" :src="path"/>
                <minus-icon
                    class="btn minus"
                    :class="{ disabled: !flipbook.canZoomOut }"
                    @click="flipbook.zoomOut"
                />
                <right-icon
                    class="btn right"
                    :class="{ disabled: !flipbook.canFlipRight }"
                    @click="right"
                />
              </div>
            </Flipbook>
            <iframe v-if="menu.type == 3" class="view-iframe" :src="path"/>
          </div>

          <div v-if="menu.property == 3">
            <img :src="menu.fileUrl[0].value"/>
          </div>

        </div>

      </el-col>
@@ -74,6 +86,7 @@
import RightIcon from 'vue-material-design-icons/ChevronRightCircle'
import PlusIcon from 'vue-material-design-icons/PlusCircle'
import MinusIcon from 'vue-material-design-icons/MinusCircle'
import io from "socket.io-client";

export default {
  name: "funcView",
@@ -102,17 +115,20 @@
        ]
      },
      defaultActive: "",
      //菜单列表
      menuList: [],
      //iframe路径
      path: "",
      imgPages: [],
      viewType: "",

      //所选菜单
      menu: "",
      //图册翻页配置
      flipConfig: {
        pages: [],
        pagesHiRes: [],
        hasMouse: true,
        pageNum: null,
      }
      },
      socketIoClient: null,
    }
  },
  mounted() {
@@ -135,31 +151,104 @@
    },
    //文件预览
    viewFile(data) {
      this.viewType = data.type
      this.menu = data
      let url
      if (data.type == 2) {
        let fileArray = data.fileUrl
        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))
      }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.property == 1) {

      } else if (data.property == 2) {
        if (data.type == 2) {
          let fileArray = data.fileUrl
          this.flipConfig.pages = []
          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))
        } else if (data.type == 1) {
          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) {
      let serveUri = 'http://192.168.0.200:10246'
      let params = {
        modulesId: form.modulesId,
        isView: true
      }

      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: '连接成功',
        });
      });

      //连接失败
      this.socketIoClient.on("connectError", (res) => {
        this.$notify.error({
          title: res.msg,
        });
      });

      this.socketIoClient.on("menuChange", (res) => {
        this.handleSelect(res)
      });

      //上一页
      this.socketIoClient.on("previousPage", (res) => {
        this.left()
      });

      //下一页
      this.socketIoClient.on("nextPage", (res) => {
        this.right()
      });

    },
    left() {
      this.$refs.flipbook.flipLeft()
    },
    right() {
      this.$refs.flipbook.flipRight()
    }
  }
}
</script>

<style scoped>
.show{
.show {
  background: #404040;
  width: 100%;
  height: 100vh;
}

.show > div {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
}

.el-select {
@@ -184,7 +273,7 @@
  height: 100vh;
}

.page-num{
.page-num {
  color: white;
}