screenFront/src/views/Temp/Tufting/component/right.vue

<template>
    <div class="container">
        <div style="height: 50%;">
            <border1 :title="'设备电机'">
                <div class="box" :style="{ width: '100%', height: '100%',position:'relative' }">
                    <div class="type">
                        <ul>
                            <li class="on">已调试</li>
                            <li class="off">未调试</li>
                        </ul>
                    </div>
                    <div v-for="(res, index) in data_dj" :style="{ width: '150px', height: '150px' }">
                        <span>
                            <i :class="res.value == '1' ? 'iconfont icon-dianji green' : 'iconfont icon-dianji red'"></i>
                        </span>
                        <p>{{ res.name }}</p>
                    </div>

                </div>
            </border1>
        </div>
        <div style="height: 50%;">
            <border1 :title="'设备传感器'">
                <div class="box" :style="{ width: '100%', height: '100%',position:'relative' }">
                    <div class="type">
                        <ul>
                            <li class="on">已调试</li>
                            <li class="off">未调试</li>
                        </ul>
                    </div>
                    <div v-for="(res, index) in data_cgq" :style="{ width: '150px', height: '150px' }">
                        <span>
                            <i
                                :class="res.value == '1' ? 'iconfont icon-jingshideng green' : 'iconfont icon-jingshideng red'"></i>
                        </span>
                        <p>{{ res.name }}</p>
                    </div>
                </div>
            </border1>
        </div>
    </div>
</template>

<script setup lang='ts'>
import border1 from "@/components/borderBox/border1.vue";
import { ref, defineProps } from "vue";
let data_dj = [
    {
        name: "上旋转电机",
        value: "1",
    },
    {
        name: "下旋转电机",
        value: "1",
    },
    {
        name: "上主轴电机",
        value: "1",
    },
    {
        name: "下主轴电机",
        value: "1",
    },
    {
        name: "x电机",
        value: "1",
    },
    {
        name: "y电机",
        value: "1",
    },
    {
        name: "升降电机",
        value: "1",
    }
]

let data_cgq = [
    {
        name: "x降速传感器",
        value: "1",
    },
    {
        name: "y降速传感器",
        value: "1",
    },
    {
        name: "左极限传感器",
        value: "1",
    },
    {
        name: "右极限传感器",
        value: "1",
    },
    {
        name: "零点传感器",
        value: "1",
    },
    {
        name: "上旋零位传感器",
        value: "1",
    },
    {
        name: "下旋零位传感器",
        value: "1",
    },
    {
        name: "上主轴零位传感器",
        value: "1",
    },
    {
        name: "下主轴零位传感器",
        value: "1",
    }
]

</script>

<style scoped>
@import '@/assets/css/iconfont.css';

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

p {
    margin: 0 5px 0 5px;
    color: #fff;
    font-size: 20px;
}

.box {
    width: 100%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    overflow: auto;
}

.green {
    color: green;
    font-size: 30px;
}

.red {
    color: #aaa;
    font-size: 30px;
}
.type {
    position: absolute;
    top: 10px;
    width: 100%;
    left: 0;
    font-size: 20px;
    color: #fff;
}
.type ul {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.type ul li {
    position: relative;
    margin: 0 20px;
}
.type ul .on::before {
    content: '';
    position: absolute;
    background-color: green;
    top: 05px;
    left: -30px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
}
.type ul .off::before {
    content: '';
    position: absolute;
    background-color: #aaa;
    top: 05px;
    left: -30px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
}
</style>