增加功能
- 指定页面展示画面
- 关闭指定页面
现有的功能只能展示4个页面,这个是根据要几个线程做UI测试,可以进行增加的,前端代码还是有很多小缺陷的,比如卡片参数,我写死了,主要是我现在用不到那么多的docker 容器,4个完全就够了,后期在慢慢改吧
修改了一个版本,毕竟本人vue 也不是太熟,太难的也做不了
https://blog.csdn.net/mxgsa/article/details/122978996
<template>
<a-row type="flex">
<a-col :span="5">
<a-collapse v-model:activeKey="activeKey" :bordered="false">
<a-collapse-panel key="1" header="画面分割">
<a-row type="flex" justify="start">
<a-col @click='splitVideo(1, 1)' :span='4' class='splitClass'>
<a-button type="primary" shape="circle">1</a-button>
</a-col>
<a-col @click='splitVideo(1, 2)' :span='4' class='splitClass'>
<a-button type="primary" shape="circle">2</a-button>
</a-col>
<a-col @click='splitVideo(1, 3)' :span='4' class='splitClass'>
<a-button type="primary" shape="circle">3</a-button>
</a-col>
<a-col @click='splitVideo(2, 2)' :span='4' class='splitClass'>
<a-button type="primary" shape="circle">4</a-button>
</a-col>
</a-row>
</a-collapse-panel>
<a-collapse-panel key="2" header="视频控制">
<a-space direction="vertical">
<a-input v-model:value.url="nourl" placeholder="novn-curl" />
<a-input v-model:value.password="nopaswod" autofocus placeholder="novncurlpassword" />
<a-button type="primary" @click="connectVnc()">连接</a-button>
</a-space>
</a-collapse-panel>
<a-collapse-panel key="3" header="视频选择">
</a-collapse-panel>
</a-collapse>
</a-col>
<a-col :span="19">
<a-row style="width: 100%;" v-for="(item, rowIndex) in rows" type="flex" :key="rowIndex">
<!-- <a-col v-for="(item, colIndex) in cols" :span="item" :key="rowIndex + colIndex"
@click="setCurrent(rowIndex, colIndex)">
<a-card size="small"
:style="(rowIndex == currentIndex[0] && colIndex == currentIndex[1]) ? 'background-color: #5ea6f1' : ''"
title='UI监控'> -->
<a-col v-for="(item, colIndex) in cols" :span="item" :key="rowIndex + colIndex">
<a-card size="small" title='UI监控' >
<template v-slot:extra>
<a-button type="primary" danger ghost @click="closenovnc(rowIndex, colIndex)">关闭</a-button>
<a-button type="primary" danger ghost @click="openhetml(rowIndex, colIndex)">放大</a-button>
</template>
<div class="cnovnc">
</div>
</a-card>
</a-col>
</a-row>
</a-col>
</a-row>
</template>
<script>
import * as MyNovnc from "../file_js/novnc_js"
export default {
name: 'novnc_page',
data() {
return {
activeKey: ['1', '2', '3', '4'],
rfb: [],
nopaswod: 'secret',
nourl: 'ws://localhost:7900/websockify',
rows: [1],
cols: [24],
currentIndex:[0,0],
href: 'www.baidu.com',
statuscode: false,
card_number:0,
status: [{
color: '#87d068',
title: '连接中'
},
{
color: '#f50',
title: '未连接'
},],
vncdetail:[{
id:1,
rfb_name:'',
isdisplay:false, // false不展示 true展示
vnc_html:'<div id="novnc-canvs1"></div>',
vnc_id:'novnc-canvs1'
},{
id:2,
rfb_name:'',
isdisplay:false, // false不展示 true展示
vnc_html:'<div id="novnc-canvs2"></div>',
vnc_id:'novnc-canvs2'
},{
id:3,
rfb_name:'',
isdisplay:false, // false不展示 true展示
vnc_html:'<div id="novnc-canvs3"></div>',
vnc_id:'novnc-canvs3'
},{
id:4,
rfb_name:'',
isdisplay:false, // false不展示 true展示
vnc_html:'<div id="novnc-canvs4"></div>',
vnc_id:'novnc-canvs4'
}],
rfb_list:[]
}
},
watch:{
// currentIndex(newnumber, oldnumber){
// console.log('新',newnumber);
// console.log('旧',oldnumber);
// }
},
mounted() {
// this.connectVnc()
},
methods: {
// 连接vnc 进行页面分配
connectVnc() {
this.card_number=0
for (this.card_number; this.card_number <4 ; this.card_number++) {
if (this.vncdetail[this.card_number].isdisplay===false){
let calss_name = document.querySelectorAll(".cnovnc")[this.card_number];
calss_name.insertAdjacentHTML('afterbegin',this.vncdetail[this.card_number].vnc_html)
this.vncdetail[this.card_number].rfb_name = MyNovnc.rfb_Init(this.vncdetail[this.card_number].vnc_id, this.nourl)
this.vncdetail[this.card_number].isdisplay=true
break
}
}
if (this.card_number===3){
console.log('2222222');
this.card_number=0
}
},
// 断开连接
closenovnc(rowIndex, colIndex) {
let number = MyNovnc.card_screen(rowIndex,colIndex)
if (this.vncdetail[number].rfb_name===''){
console.log('空');
}else{
this.vncdetail[number].rfb_name._disconnect()
this.vncdetail[number].isdisplay=false
document.getElementById(
this.vncdetail[number].vnc_id).remove()
}
console.log(this.vncdetail[number]);
},
// 页面分割
splitVideo(row, col) {
this.rows = []
this.cols = []
for (let i = 0; i < row; i++) {
this.rows.push(1)
}
for (let i = 0; i < col; i++) {
this.cols.push(24 / col)
}
},
setCurrent(row, col) {
console.log('点击了');
this.currentIndex = [row, col]
},
// 放大页面
openhetml(row,col) {
MyNovnc.card_screen(row,col)
},
},
}
</script>
<style>
.x-input {
margin-top: 40px;
width: auto;
height: auto;
}
input {
border-style: none
}
input:first-child {
margin-right: 30px;
}
</style>