CMVR-IOT-UI/src/views/inspection/cockpit/components/Monitor.vue

<template>
    <div class="page-container">
        <div class="left-container">
             <div class="robot-container">
                <div class="title">选择机器人</div>
                <div class="robot-box">
                    <div class="robot" :class="{ active: activeBot === 0 }" @click="changeBot(0)">
                        <div><SvgIcon name="bot" color="#fff" /></div>
                        <div class="bot-name">全部</div>
                    </div>
                    <div v-for="item, index in robotList" class="robot" :class="{ active: activeBot === index + 1 }" @click="changeBot(index + 1)">
                        <div>
                            <SvgIcon name="bot" :color="colorList[index]" />
                        </div>
                        <div>
                            <div class="bot-name">{{ item.robotName }}</div>
                            <div class="bot-local" :class="agvRuntimeStatusClass(item.status)">{{ agvRuntimeStatusLabel(item.status) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-container">
            <div class="video-container" v-if="activeBot == 0">
                <div class="ttt" v-for="value in 4">
                    <IPlayer :isLive="true" :videoUrl="videoUrl" />
                </div>
            </div>
            <div class="single-video-container" v-else>
                <IPlayer :isLive="true" :videoUrl="videoUrl" />
            </div>
        </div>
        <div v-if="activeBot != 0" class="right-container">
            <div class="container-title">OCR识别</div>
            <div class="ocr-container"></div>
            <div class="split-line"></div>
            <div class="container-title">红外热成像</div>
        </div>
    </div>
</template>
<script setup>
import SvgIcon from "@/components/SvgIcon";
import IPlayer from "@/components/IPlayer/index.vue";
import { getRobotList } from '@/api/inspection/robot'
import { agvRuntimeStatusClass, agvRuntimeStatusLabel } from '@/utils/agvRuntimeStatus'

const videoUrl = ref('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')

const colorList = ['#00D4FF', '#FFB300', '#00FF88', '#fd00ff']

const robotList = ref([])

const activeBot = ref(0)
const changeBot = (index) => {
    activeBot.value = index
}

const fetchRobotList = async () => {
    try {
        const res = await getRobotList({
            robotType: 2,
        })
        if (res.code === 200) {
            robotList.value = res.rows
        } else {
            console.error('获取机器人列表失败:', res.message)
        }
    } catch (error) {
        console.error('获取机器人列表失败:', error)
    }
}

onMounted(() => {
    fetchRobotList()
})
</script>
<style lang="scss" scoped>
.page-container {
    height: 100%;
    width: 100%;
    display: flex;

    .left-container {
        width: 240px;
        height: 100%;
        padding: 16px;

        .robot-container {

            .title {
                color: #8899BB;
                font-size: 14px;
                margin-bottom: 16px;
            }

            .robot-box {

                .robot {
                    background: #0F1E38;
                    height: 56px;
                    border-radius: 8px;
                    padding: 16px;
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    margin-bottom: 16px;
                    cursor: pointer;
                    border: 1px solid transparent;

                    .bot-name {
                        color: #fff;
                        font-size: 13px;
                    }

                    .bot-local {
                        font-size: 11px;
                        margin-top: 4px;
                    }

                    .online {
                        color: #0f8;
                    }

                    .unknown,
                    .offline,
                    .stopped {
                        color: #cbd5e1;
                    }

                    .manual,
                    .running {
                        color: #00d4ff;
                    }

                    .charging,
                    .paused {
                        color: #ffb300;
                    }

                    .fault,
                    .emergency {
                        color: #ff6b6d;
                    }
                }

                .active {
                    border-color: #00c2ff;
                    color: #fff;
                    box-shadow: 0 0 10px rgba(0, 194, 255, 0.5);
                }
            }
        }
    }

    .center-container {
        flex: 1;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        border: 1px solid #1e3a5f;
        border-top: 0;

        .video-container {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            grid-template-rows: repeat(2, minmax(0, 1fr));
            gap: 16px;
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;

            .ttt {
                width: auto;
                height: auto;
                min-width: 0;
                min-height: 0;
                overflow: hidden;
                box-sizing: border-box;
            }
        }

        .single-video-container {
            width: 100%;
            height: 100%;
            min-height: 0;
            overflow: hidden;
        }
    }

    .right-container {
        width: 360px;
        height: 100%;
        padding: 16px;

        .container-title {
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 16px;
        }

        .ocr-container {
            width: 100%;
            height: 360px;
        }
    }
}
</style>