CMVR-BID/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 4" class="robot" :class="{ active: activeBot === index + 1 }" @click="changeBot(index + 1)">
                        <div>
                            <SvgIcon name="bot" :color="colorList[index]" />
                        </div>
                        <div>
                            <div class="bot-name">机器人#0{{ index  + 1}}</div>
                            <div class="bot-local">厂区A-在线</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-container">监控</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";

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

const activeBot = ref(0)
const changeBot = (index) => {
    activeBot.value = index
}
</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 {
                        color: #00d4ff;
                        font-size: 11px;
                        margin-top: 4px;
                    }
                }

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

    .center-container {
        flex: 1;
        border: 1px solid #1E3A5F;
        border-top: 0;
    }

    .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>