<!--
 * @FilePath: \code\gitscreenFront\src\views\Mechanics\components\DevOverview.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-06-09 14:29:11
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
    <div class="devItem-box">
        <h2 class="title">{{ props.title }}</h2>
        <div class="devItem-content">
            <div class="content-cheijan" v-if="props.title == '设备总数'">
                <h3>{{ value.total }}台</h3>
            </div>
            <div class="content-value-cheijan" v-else>
                <div class="chejian-online on-status">{{ value.onLine }} <div class="mt10">在线</div>
                </div>
                <div class="chejian-total on-status">{{ value.total }}<div class="mt10">总数</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
// props.value数组中下标：0为全部，1为在线，2为离线
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    value: {
        type: Object,
        default: { onLine: 0, total: 0 }
    }
})
</script>

<style scoped>
.devItem-box h2 {
    color: #fff;
    font-size: 20px;
    padding-left: 20px;
    font-weight: bold;
    text-align: left;
}

.devItem-box {
    width: 48%;
    height: 30%;
}

.devItem-content {
    width: 100%;
    height: 75%;
    display: flex;
    justify-content: flex-end;
}

.content-value {
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #01617A, #173C85) 1;

}

.on-status {
    width: 50px;
    font-size: 24px;
}

.chejian-online {
    position: relative;
    left: 15%;
    color: #77FDAB;
}

.chejian-total {
    position: relative;
    left: 55%;
    bottom: 15%;
    color: #20AEC5;
}

.content-cheijan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    height: 100%;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #01617A, #173C85) 1;
}
.content-value-cheijan {
    width: 70%;
    height: 100%;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, #01617A, #173C85) 1;
}

.content-value-cheijan::after {
    content: '';
    display: block;
    border-bottom: 2px dashed #20AEC5;
    transform: rotate(-45deg);
    margin-top: -47%;
}

.content-cheijan>h3 {
    text-align: center;
    display: block;
    font-weight: bold;
    font-size: 50px;
    color: #20AEC5;
}

.content-cheijan>div {
    position: relative;
    top: 30%;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.mt10 {
    margin-top: 10px;
}
</style>
