<template>
|
<div class="base-container">
|
<el-row>
|
<el-col :span="4">
|
<div class="equipment-select">
|
<!-- <el-select v-model="equipmentSelected" @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="equipmentCode" placeholder="请输入要连接的模块id"></el-input>
|
<el-button type="primary" @click="getAllMultiMedia">连接</el-button>
|
</div>
|
|
<el-menu
|
:default-active="defaultActive"
|
class="el-menu-vertical-demo"
|
@select="handleSelect"
|
background-color="#545c64"
|
text-color="#fff"
|
ref="elMenu"
|
active-text-color="#ffd04b">
|
<el-menu-item v-for="data in dataList" :index="data.id" :key="data.id">
|
<span slot="title">{{ data.name }}</span>
|
</el-menu-item>
|
</el-menu>
|
</el-col>
|
<el-col :span="20">
|
<iframe class="view-iframe" :src="path"/>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script>
|
import {getAllMM} from "@/api/multimedia/multimedia";
|
import {getAllEq} from "@/api/equipment/equipment";
|
|
export default {
|
name: "viewPage",
|
data() {
|
return {
|
dataList: [],
|
webSocket: null,
|
path: "",
|
equipmentCode: "",
|
equipmentList: [],
|
defaultActive: ""
|
}
|
},
|
mounted() {
|
},
|
methods: {
|
//获取所有多媒体按钮
|
getAllMultiMedia() {
|
getAllMM(this.equipmentCode, 1).then(res => {
|
if (res.data.code == "200") {
|
let data = res.data.data
|
this.dataList = data
|
if (data.length > 0) {
|
this.initWebSocket(this.equipmentCode)
|
} 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, type = 2) {
|
const that = this
|
let url = "ws://192.168.0.200:88/websocket"
|
// let codeArray
|
// codeArray = JSON.parse(sessionStorage.getItem('codeArray'));
|
// if (codeArray){
|
// if (codeArray.some(e=>{return e == code})){
|
// this.$notify.warning({
|
// title: '该设备已连接',
|
// });
|
// return
|
// }
|
// }else {
|
// codeArray = []
|
// }
|
|
if ("WebSocket" in window) {
|
this.webSocket = new WebSocket(url)
|
}
|
|
this.webSocket.onopen = function () {
|
// codeArray.push(code)
|
// sessionStorage.setItem("codeArray",JSON.stringify(codeArray))
|
that.$notify.success({
|
title: '连接成功',
|
});
|
}
|
|
//连接发生错误的回调方法
|
this.webSocket.onerror = function () {
|
that.$notify.error({
|
title: '连接失败',
|
});
|
}
|
|
this.webSocket.onmessage = function (event) {
|
let msg = event.data
|
that.handleSelect(msg)
|
that.defaultActive = msg
|
};
|
|
this.webSocket.onclose = function (event) {
|
that.webSocket.close()
|
}
|
},
|
//文件预览
|
viewFile(data) {
|
let url
|
if (data.content) {
|
url = data.content
|
this.path = 'http://192.168.0.200:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url))
|
} else if (data.webUrl) {
|
url = data.webUrl
|
this.path = url
|
} else {
|
url = ""
|
}
|
},
|
|
//点击菜单时的事件
|
handleSelect(index) {
|
let selectData = this.dataList.filter(e => {
|
return e.id == index
|
})
|
this.viewFile(selectData[0])
|
},
|
|
//选择框改变事件
|
// selectChange(data){
|
// this.path = ""
|
// this.getAllMultiMedia(data)
|
// this.initWebSocket(data)
|
// }
|
}
|
}
|
</script>
|
|
<style scoped>
|
.base-container {
|
height: 100%;
|
}
|
|
.equipment-select {
|
display: flex;
|
margin: 10px;
|
}
|
|
.el-select {
|
width: 100%
|
}
|
|
.el-row {
|
height: 100%;
|
}
|
|
.el-col {
|
height: 100%;
|
}
|
|
.view-iframe {
|
width: 100%;
|
height: 100%;
|
}
|
|
|
</style>
|
