on-site-robots-screen/src/views/home/index.vue

<template>
    <!-- 非全屏状态 -->
    <div ref="appRef" class="app-container">
        <!-- 机器人首页 -->
        <!-- 使用grid布局 -->
        <!-- 非全屏模式 -->
        <div class="robot-container">
            <!-- 左一 -->
            <div
                :style="{
                    gridColumn: fullScreenVisible ? '1 / 9' : '1 / 4',
                    gridRow: fullScreenVisible ? '1 / 13' : '1 / 7',
                }"
            >
                <LeftOne
                    :videoId="'video-1'"
                    :cameraNode="cameraNode_1"
                    :fullScreenVisible="fullScreenVisible"
                    @onHandleChangeView="onHandleChangeView"
                    @onHandleOperationPanel="onHandleOperationPanel"
                    @onHandleFullScreenToggle="onHandleFullScreenToggleL"
                />
            </div>
            <!-- 左二 -->
            <div class="robot-2" v-if="!fullScreenVisible">
                <LeftTwo />
            </div>

            <!-- 中一 -->
            <div
                :style="{
                    gridColumn: fullScreenVisible ? '9 / 13' : '4 / 10',
                    gridRow: fullScreenVisible ? '1 / 6' : '1 / 8',
                }"
            >
                <CenterOne
                    :videoId="'video-2'"
                    :cameraNode_2="cameraNode_2"
                    :fullScreenVisible="fullScreenVisible"
                />
            </div>
            <!-- 中二 -->
            <div class="robot-4" v-if="!fullScreenVisible">
                <CenterTwo />
            </div>

            <!-- 右一 -->
            <div class="robot-5" v-if="!fullScreenVisible">
                <RightOne />
            </div>
            <!-- 右二 -->
            <div class="robot-6" v-if="!fullScreenVisible">
                <RightTwo />
            </div>

            <div class="robot-7" v-if="fullScreenVisible">
                <ControlDeck />
            </div>
        </div>
    </div>

    <!-- 操作面板 -->
    <n-drawer resizable placement="right" :default-width="502" v-model:show="operationPanelVisible">
        <div class="operation-panel-container">
            <div class="operation-panel-content">
                <ControlDeck />
            </div>
        </div>
    </n-drawer>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { initLoginApi, getDeviceUrlApi } from '@/utils/initLogin'
import { useScale } from '@/hooks/useScale' // 引入自定义 Hook
import LeftOne from './components/left-one.vue'
import LeftTwo from './components/left-two.vue'
import CenterOne from './components/center-one.vue'
import CenterTwo from './components/center-two.vue'
import RightOne from './components/right-one.vue'
import RightTwo from './components/right-two/index.vue'
import ControlDeck from './components/control-deck.vue'

const appRef = ref(null) // 获取 DOM 引用
const fullScreenVisible = ref(false) // 全屏状态

// 使用 useScale Hook（直接调用，无需在 setup() 里）
const { baseWidth, baseHeight, scale } = useScale(appRef)

const cameraNode_1 = ref({
    puid: '201115200268437643',
    idx: 0,
    stream: 0,
    name: '',
    operateType: 1,
    steamCode: '',
    steamURL: '',
})
const cameraNode_2 = ref({
    puid: '201115200268437643',
    idx: 1,
    stream: 0,
    name: '',
    operateType: 1,
    steamCode: '',
    steamURL: '',
})

const operationPanelVisible = ref(false) // 操作面板是否显示

// 打开操作面板
const onHandleOperationPanel = (visible) => {
    operationPanelVisible.value = visible
}
// 全屏控制
const onHandleFullScreenToggleL = (visible) => {
    fullScreenVisible.value = visible
}
// 视角切换
const onHandleChangeView = () => {
    const tempIdx = cameraNode_1.value.idx
    cameraNode_1.value.idx = cameraNode_2.value.idx
    cameraNode_2.value.idx = tempIdx
    const temp = cameraNode_1.value.steamURL
    cameraNode_1.value.steamURL = cameraNode_2.value.steamURL
    cameraNode_2.value.steamURL = temp
}

const loginParams = ref({
    // - 登录平台IP
    address: '60.168.132.97',
    port: '49988',
    // - 登录平台用户名
    user: 'admin',
    // - 登录平台密码
    password: 'Aa123456',
    // - 登录平台企业ID
    epid: 'YDJFXK',
    // - 登录平台是否通过网闸模式
    bfix: 0,
})

// 初始化登录
const initLoginData = async () => {
    initLoginApi(loginParams.value).then((res) => {
        localStorage.setItem('token', res?.data?.token)
        getDeviceData()
    })
}

// 获取视频地址
const getDeviceData = async () => {
    const { data: res } = await getDeviceUrlApi({
        token: localStorage.getItem('token'),
        puid: '201115200268437643',
        idx: 0,
        stream: 0,
        type: 'HTTP-FLV',
    })
    const { data: res2 } = await getDeviceUrlApi({
        token: localStorage.getItem('token'),
        puid: '201115200268437643',
        idx: 1,
        stream: 0,
        type: 'HTTP-FLV',
    })

    cameraNode_1.value.steamURL = res?.streamUrl
    cameraNode_2.value.steamURL = res2?.streamUrl
}

initLoginData()
</script>

<style lang="scss">
.app-container {
    .robot-container,
    .full-screen-container {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: repeat(12, 1fr);
        grid-template-columns: repeat(12, 1fr);
        // gap: 10px;
    }

    // 左侧
    .robot-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 7;
    }
    .robot-2 {
        grid-column: 1 / 4;
        grid-row: 7 / 13;
    }

    // 中间
    .robot-3 {
        grid-column: 4 / 10;
        grid-row: 1 / 8;
    }
    .robot-4 {
        grid-column: 4 / 10;
        grid-row: 8 / 13;
    }

    // 右侧
    .robot-5 {
        grid-column: 10 / 13;
        grid-row: 1 / 8;
    }
    .robot-6 {
        grid-column: 10 / 13;
        grid-row: 8 / 13;
    }

    .robot-7 {
        grid-column: 9 / 13;
        grid-row: 6 / 13;
    }

    .full-screen-left1 {
        grid-column: 1 / 9;
        grid-row: 1 / 13;
    }
    .full-screen-right1 {
        grid-column: 9 / 13;
        grid-row: 1 / 6;
    }
    .full-screen-right2 {
        grid-column: 9 / 13;
        grid-row: 6 / 13;
    }
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    padding-right: 10px;
}

.child-container {
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.more-btn {
    width: 58px;
    height: 24px;
    border-radius: 12px;
    color: #d6fdff;
    background: linear-gradient(to bottom, rgba(15, 47, 78, 0.5) 0%, rgba(0, 222, 255, 0.5) 100%);
    text-align: center;
    line-height: 24px;
    cursor: pointer;
}

.n-drawer {
    background-color: rgba(0, 0, 0, 0.8);
}

.operation-panel-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .operation-panel-content {
        width: 90%;
        background-color: rgba(0, 112, 190, 0.3);
        color: #fff;
        border: 1px solid #0070be;
    }
}
</style>