1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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>
|
|
