dataview/camera/webs/camera - v2 old.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
    <meta http-equiv="Expires" content="0"/>
    <title>数据大屏：数据大屏教学现场</title>
    <link rel="stylesheet" href="demo1.css">
    <script>
        document.write(
            "<link type='text/css' href='./demo.css?version=" +
            new Date().getTime() +
            "' rel='stylesheet' />",
        );
    </script>
    <script src="./vue.js"></script>
</head>
<body>
<div class="main">
    <div class="main-header">
        <div class="sy"
             onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=003fe9f6a92b47bc924fe04f59fd6acb')">
            <div>首页</div>
        </div>
        <div class="jyjx"
             onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=7f0176157e93423e9b4e48cae1c186f3')">
            <div>教育教学</div>
        </div>
        <div class="zsxx"
             onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=e67784d9632c44099e03b56256df7e5d')">
            <div>招生信息</div>
        </div>
        <div class="jyxx"
             onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=22a2c238d23e4eb0a80bd2e4f047ba90')">
            <div>就业信息</div>
        </div>
        <div class="zwhq"
             onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=2a864f38d2964ebdb63db7257a48c330')">
            <div>总务后勤</div>
        </div>
        <div class="jsxx"
             onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=83f18d8a43a24be79a041e4cec596fa3')">
            <div>教师信息</div>
        </div>
        <div class="xsxx"
             onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=5f656466368442ee88abfe34a42a3dd8')">
            <div>学生信息</div>
        </div>
        <div class="shfw"
             onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=170f4fae167d4b2eb7578073cb713fb1')">
            <div>社会服务</div>
        </div>
        <div class="jxxc">
            <div>教学现场</div>
        </div>
    </div>
    <div class="main-container">
        <div class="menu-container" id="menu-container">
            <div class="campus-tabs">
                <div class="campus-tab campus-tab-active" id="xqxq-tab" onclick="switchCampus('西溪校区')">
                    <div>西溪校区</div>
                </div>
                <div class="campus-tab" id="laxq-tab" onclick="switchCampus('临安校区')">
                    <div>临安校区</div>
                </div>
            </div>
            <div class="title-item">摄像头列表</div>
            <div v-for="(item,index) in message" :key="index">
                <div class="menu-title">
                    <img src="./icon%202.png" alt=""> <span>{{item.buildname}}</span>
                </div>
                <div class="class-container">
                    <div class="class-item" v-for="(item1,index1) in item.classes" :key="index1"
                         @click="handleClick(item1)">
                        <div>
                            <img src="./03.png" alt="">
                        </div>
                        <div>{{item1.classname}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="video-container">
            <div class="title-item">
                视频区域
                <select class="sel2" onchange="changeWndNum(this.value);">
                    <option value="1" selected>1x1</option>
                    <option value="2">2x2</option>
                    <option value="3">3x3</option>
                    <option value="4">4x4</option>
                    <option value="1*2">1x2</option>
                    <option value="2*1">2x1</option>
                </select>
            </div>
            <div class="left">
                <div id="divPlugin" class="plugin"></div>
                <!-- 隐藏的输入元素，供JavaScript使用 -->
                <div style="display:none;">
                    <input id="loginip" type="text" class="txt" value=""/>
                    <input id="port" type="text" class="txt" value=""/>
                    <input id="username" type="text" class="txt" value=""/>
                    <input id="password" type="password" class="txt" value=""/>
                    <input id="deviceport" type="text" class="txt"/>
                    <input id="rtspport" type="text" class="txt"/>
                    <select id="ip" class="sel" onchange="getChannelInfo();getDevicePort();"></select>
                    <select id="channels" class="sel"></select>
                    <select id="streamtype" class="sel">
                        <option value="1" selected>主码流</option>
                        <option value="2">子码流</option>
                        <option value="3">第三码流</option>
                        <option value="4">转码码流</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="./jquery-1.7.1.min.js"></script>
<script id="videonode" src="./codebase/webVideoCtrl.js"></script>
<script src="./cn/demo.js"></script>
<script>


    function redirectToUrl(url) {
        // console.log(url);
        window.location.href = url;
    }
    // 当前选中的校区
    var currentCampus = '西溪校区';

    // 切换校区
    function switchCampus(campus) {
        currentCampus = campus;
        // 更新tab样式
        if (campus === '西溪校区') {
            $('#xqxq-tab').addClass('campus-tab-active');
            $('#laxq-tab').removeClass('campus-tab-active');
        } else {
            $('#laxq-tab').addClass('campus-tab-active');
            $('#xqxq-tab').removeClass('campus-tab-active');
        }
        // 重新加载摄像头列表
        loadCameraList(campus);
    }

    // 加载摄像头列表
    function loadCameraList(campus) {
        var requestBody = new FormData();
        var requestData = {
            condition: {
                xq: campus
            },
            requiredItems: "jxlmc,sxtmc,ipdz,dk,zh,mm,xq,pp"
        };
        requestBody.append('requestBody', JSON.stringify(requestData));
        
        $.ajax({
            url: 'http://172.16.0.63:28080/dmp-res-api/restservice/20241028113645823630',
            type: 'POST',
            contentType: false,
            data: requestBody,
            processData: false,
            success: function(response) {
                let a = response;
                console.log(a);
                let obj = [];
                for (let i = 0; i < a.resultData.length; i++) {
                    //判断data中是否有值，没有就添加，有就跳过
                    let flag = false;
                    let index = 0;
                    for (let j = 0; j < obj.length; j++) {
                        if (obj[j].buildname == a.resultData[i].jxlmc) {
                            flag = true;
                            index = j;
                            break;
                        }
                    }
                    if (flag) {
                        obj[index].classes.push({
                            classname: a.resultData[i].sxtmc,
                            ip: a.resultData[i].ipdz || '',
                            port: a.resultData[i].dk || '',
                            username: a.resultData[i].zh || '',
                            password: a.resultData[i].mm || '',
                            brand: a.resultData[i].pp || '',
                            campus: a.resultData[i].xq || campus
                        })
                    }
                    if (!flag) {
                        obj.push({
                            buildname: a.resultData[i].jxlmc,
                            classes: [{
                                classname: a.resultData[i].sxtmc,
                                ip: a.resultData[i].ipdz || '',
                                port: a.resultData[i].dk || '',
                                username: a.resultData[i].zh || '',
                                password: a.resultData[i].mm || '',
                                brand: a.resultData[i].pp || '',
                                campus: a.resultData[i].xq || campus
                            }]
                        })
                    }
                }
                console.log(obj)
                app.$data.message = obj;
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
            }
        });
    }

    var app = new Vue({
        el: '#menu-container',
        data: {
            message:[],
        },
        mounted: function () {
            console.log("mounted");
        },
        created: function(){
            console.log("created");
            // 初始化校区tab样式
            $('#xqxq-tab').addClass('campus-tab-active');
            $('#laxq-tab').removeClass('campus-tab-active');
            // 加载默认校区（西溪校区）的摄像头列表
            loadCameraList('西溪校区');
        },
        methods: {
            handleClick(cameraInfo) {
                // cameraInfo包含：ip, port, username, password, brand等
                // 所有信息都从接口获取，不再使用写死的默认值
                if (!cameraInfo.ip) {
                    console.error('摄像头IP地址为空，无法登录');
                    alert('摄像头信息不完整，无法登录');
                    return;
                }
                clickLogout();
                setTimeout(function () {
                    // 使用接口返回的值，不再使用默认值
                    $('#loginip').val(cameraInfo.ip);
                    $('#port').val(cameraInfo.port || '');
                    $('#username').val(cameraInfo.username || '');
                    $('#password').val(cameraInfo.password || '');
                    clickLogin(cameraInfo.ip);
                }, 200);
            }
        }
    })
</script>

</body>
</html>