使用vue3（el+）绘制简单机柜图

在项目中，需要绘制一个简单的机柜图，初始版代码如下，持续更新

<template>
    <div >
        <cl-card v-for="row in cabinetBackground" :key="row.name" style="display:inline-block;margin:10px 10px">
            <el-row class="cabinet-container" v-for="i in row.height" :key="i" style="height:21px;width:300px;">
                
                <el-col :span="2" class="cabinet-cell">{{row.height-i+1}}</el-col>
                <el-col :span="20" class="cabinet-cell"></el-col>
                <el-col :span="2" class="cabinet-cell">{{row.height-i+1}}</el-col>
            </el-row>
            <el-row class="cabinet-label">
                <el-col :span="24">{{ row.name }}</el-col>
                
            </el-row>

        </cl-card>
    </div>
</template>

<script>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';


export default {
    props:{
        mainHeight: Number,
        mainWidth: Number,
        loginUser: String
    },
    data() {
        return {
            cabinetBackground: [
                {"name": "A01", "height": 42},
                {"name": "A02", "height": 42},
                {"name": "A03", "height": 42},
                {"name": "A04", "height": 42},
            ],
            cabinetDevices: {
                "A01": [
                    {"name": "X_JR_R01", "bottom":2, "top": 7, "type": "router", "color": "red"},
                    {"name": "X_JR_S01", "bottom":12, "top": 12, "type": "switch", "color": "green"},
                ],
                "A02": [
                    {"name": "A_JR_R02", "bottom":8, "top": 15, "type": "router", "color": "red"},
                    {"name": "aserver1", "bottom":2, "top": 5, "type": "server", "color": "blue"},
                ],
                "A03": [
                    {"name": "aserver1", "bottom":2, "top": 5, "type": "server", "color": "blue"},
                ],
            },
            cabinetLayer: {
                
            }
        };
    },
    computed:{
        tableHeight(){return this.mainHeight-100 + 'px'}
    },
    methods: {
        
        
    },
    mounted() {
        
    },
};
</script>


<style scoped>

.cabinet-label{
    width:100%;
    color:red;
    text-align:center
}
.cabinet-cell{
    text-align:center;
    height:100%;
    border:1px solid black
}
</style>