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="getMenuList"></avue-form>
| <div class="menu-btn-group">
| <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="sendMsg('changeImgPage','previous')">上一张</el-button>
| <el-button size="small" @click="sendMsg('changeImgPage','next')">下一张</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:"currentDevice",
| span:6,
| },
| {
| label:"控制模块",
| prop:"modulesId",
| span:6,
| },
| ]
| },
| menuList:[],
| currentClick:{},
| }
| },
| mounted() {
| },
| created() {
| this.connect()
| },
| methods: {
| getMenuList(form,done){
| this.sendMsg("putInClientMap",null)
| done()
| },
| menuChange(data){
| this.currentClick = data
| this.sendMsg("menuChange",data.id)
| },
| sendMsg(msgName,data) {
| let msg = {
| current:this.form.currentDevice,
| target:this.form.modulesId,
| msg :data
| }
| this.socketIoClient.emit(msgName,JSON.stringify(msg))
| },
| connect(){
|
| // if (this.socketIoClient != null){
| // this.socketIoClient.disconnect()
| // this.socketIoClient = null
| // }
|
| 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>
|
|
