<template>
|
<div>
|
<div class="equipmentSelect">
|
|
<el-form :inline="true" :model="equipmentForm" ref="ruleForm" :rules="rules" class="demo-form-inline">
|
<el-form-item label="控制设备" prop="targetCode">
|
<!-- <el-select v-model="equipmentForm.code" @change="selectChange" placeholder="请选择">-->
|
<!-- <el-option-->
|
<!-- v-for="item in equipmentList"-->
|
<!-- :key="item.id"-->
|
<!-- :label="item.name"-->
|
<!-- :value="item.id">-->
|
<!-- </el-option>-->
|
<!-- </el-select>-->
|
<el-input v-model="equipmentForm.targetCode"></el-input>
|
</el-form-item>
|
<el-form-item label="当前设备" prop="code">
|
<el-input v-model="equipmentForm.code"></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="validForm('ruleForm')">连接</el-button>
|
</el-form-item>
|
</el-form>
|
|
</div>
|
<div class="button-group">
|
<el-button @click="controller(data)" v-for="data in multiMediaList" :key="data.id">{{data.name}}</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {getAllEq} from "@/api/equipment/equipment";
|
import {getAllMM} from "@/api/multimedia/multimedia";
|
|
export default {
|
name: "controllerPage",
|
data(){
|
return{
|
multiMediaList: [],
|
webSocket: null,
|
equipmentList:[],
|
equipmentForm:{
|
code:"",
|
targetCode: ""
|
},
|
rules:{
|
code: [
|
{ required: true, message: '请输入设备编码', trigger: 'change' },
|
],
|
targetCode: [
|
{ required: true, message: '请输入设备编码', trigger: 'change' },
|
],
|
},
|
}
|
},
|
mounted() {
|
},
|
methods:{
|
validForm(formName){
|
this.$refs[formName].validate((valid) => {
|
if (valid) {
|
this.getAllMultiMedia()
|
} else {
|
console.log('error submit!!');
|
return false;
|
}
|
});
|
},
|
|
//获取所有多媒体按钮
|
getAllMultiMedia() {
|
getAllMM(this.equipmentForm.targetCode,1,1).then(res => {
|
if (res.data.code == "200") {
|
let data = res.data.data
|
this.multiMediaList = data
|
if (data.length>0){
|
this.initWebSocket(this.equipmentForm.code,this.equipmentForm.targetCode)
|
}else {
|
this.$notify.error({
|
title: '未查找到该设备',
|
});
|
}
|
}
|
})
|
},
|
|
//获取所有设备列表
|
getAllEquipment(){
|
getAllEq().then(res=>{
|
if (res.data.code == "200"){
|
let data = res.data.data
|
this.equipmentList = data
|
}
|
})
|
},
|
|
//初始化webSocket
|
initWebSocket(code,targetCode,type=1) {
|
const that = this
|
let url = "ws://192.168.0.200:88/websocket/"+code +"/"+targetCode+"/"+type
|
if ("WebSocket" in window) {
|
this.webSocket = new WebSocket(url)
|
}
|
|
this.webSocket.onopen = function (){
|
that.$notify.success({
|
title: '连接成功',
|
});
|
}
|
|
//连接发生错误的回调方法
|
this.webSocket.onerror = function () {
|
that.$notify.error({
|
title: '连接失败',
|
});
|
}
|
|
this.webSocket.onclose = function (event) {
|
that.webSocket.close()
|
}
|
},
|
|
//选择框改变事件
|
selectChange(data){
|
this.path = ""
|
this.getAllMultiMedia(data)
|
this.initWebSocket(data)
|
},
|
|
controller(data){
|
this.webSocket.send(data.id)
|
}
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
