UI自动化之监控平台的搭建VUE+novnc(前端二)

增加功能

1. 指定页面展示画面
2. 关闭指定页面

现有的功能只能展示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>