<template>
    <div class="equipinfo">
        <div class="other-people">
            <div class="image-border image-border1"></div>
            <div class="image-border image-border2"></div>
            <div class="image-border image-border3"></div>
            <div class="image-border image-border4"></div>
            <div class="other-people-title">
                设备信息统计
            </div>
            <div class="thisContent">
                <ul>
                    <li>
                        <div class="ringCircle">
                            <Ring></Ring>
                        </div>
                        <em>{{info.Detector_totalnum}}台</em>
                        <span>设备总数</span>
                    </li>
                    <li>
                        <div class="ringCircle">
                            <Ring></Ring>
                        </div>
                        <em>{{info.Detector_onlinenum}}台</em>
                        <span>在线设备</span>
                    </li>
                    <li>
                        <div class="ringCircle">
                            <Ring></Ring>
                        </div>
                        <em>{{info.Detector_offlinenum}}台</em>
                        <span>离线设备</span>
                    </li>
                    <li>
                        <div class="ringCircle">
                            <Ring></Ring>
                        </div>
                        <em>{{info.Detector_disablednum}}台</em>
                        <span>禁用设备</span>
                    </li>
                    <li>
                        <div class="ringCircle">
                            <Ring></Ring>
                        </div>
                        <em>{{info.Warninglog_todaycount}}个</em>
                        <span>当日报警数</span>
                    </li>
                    <li>
                        <div class="ringCircle">
                            <Ring></Ring>
                        </div>
                        <em>{{info.Warninglog_totalcount}}件</em>
                        <span>可疑事件总数</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import Ring from '@/components/Ring.vue'
    export default {
        data() {
            return {
                info: {
                    Detector_disablednum: 0,
                    Detector_offlinenum: 0,
                    Detector_onlinenum: 0,
                    Detector_totalnum: 0,
                    Warninglog_todaycount: 0,
                    Warninglog_totalcount: 0,
                }
            }
        },
        props: ['equipRs'],
        watch: {
            equipRs: function (val) {
                let that = this;
                if(!val.Rs){
                    return false
                }
                else{
                    that.info = val.Rs;
                }
            },
        },
        components: {
            Ring
        }
    }
</script>

<style scoped>
    .other-people {
        width: 439px;
        height: 432px;
        margin-left: 0;
        overflow: hidden;
        background: #000F2A;
    }

    .equipinfo .image-border2 {
        right: 0;
    }

    .equipinfo .image-border4 {
        right: 0;
    }

    ul, li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .thisContent ul {
        width: 100%;
        overflow: hidden;
        display: block;
        padding: 0 23px;
        margin: 0 auto;
        margin-top: 60px;
    }

    .thisContent ul li {
        width: 120px;
        height: 110px;
        float: left;
        margin-right: 20px;
        margin-bottom: 80px;
    }

    .thisContent ul li:nth-child(3) {
        margin-right: 0;
    }

    .thisContent ul li:nth-child(6) {
        margin-right: 0;
    }

    .ringCircle {
        width: 100px;
        height: 100px;
        overflow: hidden;
        border-radius: 250px;
        border: 10px solid rgba(37, 146, 226, 0.6);
    }

    .thisContent li em {
        position: relative;
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        bottom: 75px;
        color: #67BFFF;
        font-size: 18px;
        text-align: center;
        font-style: normal;
    }

    .thisContent li span {
        position: relative;
        bottom: 20px;
        color: #67BFFF;
        font-size: 16px;
        text-align: center;
    }
</style>
