signal_web/src/components/EquipInfo.vue

<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>
    let qs = require('qs');
    import { GetStaticinfo } from '../api/getApiRes.js'
    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,
                }
            }
        },
        mounted() {
            let that = this;
            that.getDate();
            this.timer = setInterval(() => {
                that.getDate();
            }, 1600);
        },
        methods: {
            getDate() {
                let that = this;
                let param = {
                    token: localStorage.token
                };
                let postdata = qs.stringify(param);
                GetStaticinfo(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        this.info = json.Rs;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
        },
        components: {
            Ring
        }
    }
</script>

<style scoped>
    .other-people {
        width: 439px;
        height: 422px;
        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>