forked from SmartBench/CMVR-IOT-UI
120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
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> |