<template>
|
<div>
|
<avue-form ref="form" v-model="form" :option="option" @submit="connect">
|
<template slot-scope="{size}" slot="menuForm">
|
<el-button v-if="!socketIoClient" type="primary" :size="size" @click="$refs.form.submit()">连 接</el-button>
|
<el-button v-if="socketIoClient" type="danger" :size="size" @click="disconnect">断 开</el-button>
|
</template>
|
</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";
|
import {getAllEq} from "@/api/equipment/equipment";
|
|
export default {
|
name: "funcController",
|
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 == 1
|
})
|
if (filterArray.length>0){
|
callback()
|
}else {
|
callback(new Error("请输入正确的控制器设备码"))
|
}
|
} else {
|
callback(new Error('请输入设备码'));
|
}
|
};
|
return {
|
form:{},
|
option:{
|
emptyBtn:false,
|
submitText: "连接",
|
submitBtn:false,
|
menuSpan: 1,
|
column:[
|
{
|
label:"控制器设备编码",
|
labelWidth:150,
|
prop:"controllerEquipmentCode",
|
span:6,
|
rules: [{
|
required: true,
|
trigger: "blur",
|
validator:validateEquipment,
|
}],
|
},
|
{
|
label:"显示器设备编码",
|
labelWidth:150,
|
prop:"viewEquipmentCode",
|
span:6,
|
type: "select",
|
dicUrl: `/api/equipment/equipment/all?type=2`,
|
props: {
|
label: "code",
|
value: "code"
|
},
|
rules: [{
|
required: true,
|
message: "请选择显示器",
|
trigger: "blur",
|
}],
|
},
|
]
|
},
|
menuList:[],
|
currentClick:{},
|
socketIoClient:null,
|
}
|
},
|
mounted() {
|
},
|
created() {
|
},
|
methods: {
|
menuChange(data){
|
this.currentClick = data
|
this.sendMsg("menuChange",data.id)
|
},
|
sendMsg(msgName,data) {
|
let msg = {
|
current:this.form.controllerEquipmentCode,
|
target:this.form.viewEquipmentCode,
|
msg :data
|
}
|
this.socketIoClient.emit(msgName,JSON.stringify(msg))
|
},
|
//连接
|
connect(form,done){
|
let serveUri = 'http://192.168.0.200:10246'
|
let params = {
|
current :form.controllerEquipmentCode
|
}
|
this.socketIoClient = io.connect(serveUri, {
|
'force new connection': true,
|
'query': 'connectInfo=' + JSON.stringify(params)
|
});
|
//监听与服务器的连接状态
|
this.socketIoClient.on("connect",()=>{
|
done()
|
})
|
//监听服务器发回的消息
|
//连接成功
|
this.socketIoClient.on("connectOk", (res) => {
|
if (res.code == 200){
|
let params = {
|
equipmentCode :form.viewEquipmentCode
|
}
|
getAll(params).then(res=>{
|
if (res.data.code == 200){
|
this.menuList = res.data.data
|
this.$notify.success({title:"连接成功"})
|
}
|
})
|
}
|
});
|
//连接失败
|
this.socketIoClient.on("connectError", (res) => {
|
this.$notify.error({
|
title: res.msg,
|
});
|
});
|
},
|
disconnect() {
|
console.log(this.socketIoClient)
|
if (this.socketIoClient != null){
|
this.socketIoClient.disconnect()
|
this.menuList = []
|
if (this.socketIoClient.disconnected){
|
this.socketIoClient = null
|
this.$notify.success({title:"断开成功"})
|
}else {
|
this.$notify.error({title:"断开失败"})
|
}
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
