From 1e1cf2610d0d40eb337c4df0a4a03d18d4289ba4 Mon Sep 17 00:00:00 2001
From: guoshilong <123456>
Date: Fri, 17 Mar 2023 10:26:49 +0800
Subject: [PATCH] 添加socket连接
---
src/router/page/index.js | 2
src/views/funcController.vue | 117 +++++++++++++++++++
src/views/funcView.vue | 187 +++++++++++++++++++++++--------
3 files changed, 256 insertions(+), 50 deletions(-)
diff --git a/src/router/page/index.js b/src/router/page/index.js
index bdc7c19..979e185 100644
--- a/src/router/page/index.js
+++ b/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",
diff --git a/src/views/funcController.vue b/src/views/funcController.vue
new file mode 100644
index 0000000..e2f4990
--- /dev/null
+++ b/src/views/funcController.vue
@@ -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>
diff --git a/src/views/funcView.vue b/src/views/funcView.vue
index 16e85c9..5f5b177 100644
--- a/src/views/funcView.vue
+++ b/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;
}
--
Gitblit v1.9.3