signal_web/src/components/SingleEquipInfo.vue

<template>
    <div class="singleEquipinfo">
        <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="timePart">
                <div class="lt">
                    <h5>设备运行时间 <s>EQUIP ACTIVE TIME</s></h5>
                    <P>{{time}}</P>
                    <span><s>可疑事件 WARNING EVENT</s>  <em>{{dangerItem }}</em></span>
                    <ul>
                        <li>
                            <em>STOP</em>
                            <i v-if="i == 1"></i>
                        </li>
                        <li>
                            <em>SLOW</em>
                            <i v-if="i == 2"></i>
                        </li>
                        <li>
                            <em>NORMAL</em>
                            <i v-if="i == 3"></i>
                        </li>
                        <li>
                            <em>RACING</em>
                            <i v-if="i == 4"></i>
                        </li>
                    </ul>
                </div>
                <div class="rt">
                    <div class="top">
                        <h5>安全</h5>
                        <s>SAFE</s>
                        <i v-if="state"></i>
                    </div>
                    <div class="middle">
                        <span>设备探测结果</span>
                        <s>DETECT RESULT</s>
                    </div>
                    <div class="bottom">
                        <h5>可疑</h5>
                        <s>WARNING</s>
                        <i v-if="!state"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                i: 3,
                state: true,
                time: '00:00:00',
                dangerItem: '0',
            }
        },
        props: ['totalRs'],
        mounted() {
            let that = this;
            this.timer = setInterval(() => {
                that.getTime();
            }, 1000);
        },
        watch: {
            totalRs: function (val) {
                let that = this;
                that.state = val.BoolSafe == 0 ? true : false;
                that.dangerItem = val.DetRs[0].WarnNum;
            },
        },
        filters: {
            fmtDate: function (value) {
                if (!value) {
                    return '---';
                } else {
                    return value.substr(11, 8);
                }
            }
        },
        methods: {
            test: function () {
                let house = new Date().getHours();
                let min = new Date().getMinutes();
                let sec = new Date().getSeconds();
                house = house > 9 ? house : '0' + house;
                min = min > 9 ? min : '0' + min;
                sec = sec > 9 ? sec : '0' + sec;
                this.time = house + ":" + min + ":" + sec;
                this.dangerItem = Math.floor(Math.random() * 10) * 2;
                this.state = Math.floor(Math.random() * 2) == 2;
                this.i = Math.floor(Math.random() * 3);
            },
            getTime() {
                let that = this;
                let date = new Date();
                let Hours = date.getHours();
                let Minutes = date.getMinutes();
                let Seconds = date.getSeconds();
                if (Hours >= 0 && Hours <= 9) {
                    Hours = "0" + Hours;
                }
                if (Minutes >= 0 && Minutes <= 9) {
                    Minutes = "0" + Minutes;
                }
                if (Seconds >= 0 && Seconds <= 9) {
                    Seconds = "0" + Seconds;
                }

                let thisdata = Hours + ':' + Minutes + ':' + Seconds;
                that.time = thisdata;
            }
        },
    }
</script>

<style scoped>

    .singleEquipinfo {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

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

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

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

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

    em, s, i {
        font-style: normal;
        text-decoration: none;
    }

    .timePart {
        width: 385px;
        height: 170px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 120px;
    }

    .timePart .lt {
        width: 240px;
        overflow: hidden;

        float: left;
    }

    .timePart .rt {
        width: 140px;
        overflow: hidden;

        float: right;
    }

    .timePart .lt h5 {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 16px;
        font-weight: normal;
        color: #6DC1FF;
        text-align: left;
    }

    .timePart .lt s {
        font-size: 14px;
    }

    .timePart .lt p {
        width: 100%;
        height: 72px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        padding-top: 10px;
        font-size: 60px;
        color: #6DC1FF;
        text-align: left;
        font-family: UniDreamLED;
    }

    .timePart .lt span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 24px;
        color: #6DC1FF;
        text-align: right;
        line-height: 20px;
        padding-bottom: 5px;
    }

    .timePart .lt span em {
        font-family: UniDreamLED;
    }

    .timePart .lt ul {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .timePart .lt li {
        width: 23%;
        height: 25px;
        background: #005EA2;
        color: #fff;
        text-align: center;
        float: left;
        margin-right: 6px;
        font-size: 12px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .timePart .lt li:nth-child(4) {
        margin-right: 0;
    }

    .timePart .lt li i {
        width: 90%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 5px;
        height: 5px;
        background: #fff;
    }

    .rt .top {
        width: 100%;
        height: 50px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #005EA2;
        color: #fff;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .rt .top h5 {
        width: 80px;
        font-size: 24px;
        margin: 0;
        float: left;
        text-align: left;
        padding-left: 20px;
    }

    .rt .top s {
        float: left;
        font-size: 12px;
        text-align: left;
        padding-left: 20px;
    }

    .rt .top i {
        position: relative;
        top: -20px;
        right: 10px;
        float: right;
        width: 15px;
        height: 30px;
        background: linear-gradient(135deg, #fff 25%, #005EA2 0,
        #005EA2 50%, #fff 0,
        #fff 75%, #005EA2 0);
        background-size: 12px 12px;
    }

    .rt .middle {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 6px;
        margin-bottom: 6px;
        background: #005EA2;
        color: #fff;
        padding-top: 4px;
        padding-bottom: 5px;
    }

    .middle span {
        width: 100%;
        margin: 0 auto;
        display: block;
        font-size: 14px;
        text-align: left;
        padding-left: 10px;
    }

    .middle s {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        font-size: 12px;
        text-align: left;
        padding-left: 10px;
    }

    .rt .bottom {
        width: 100%;
        height: 50px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #005EA2;
        color: #fff;
        padding-top: 3px;
        padding-bottom: 3px;
    }

    .rt .bottom h5 {
        width: 80px;
        font-size: 24px;
        margin: 0;
        float: left;
        text-align: left;
        padding-left: 20px;
    }

    .rt .bottom s {
        float: left;
        font-size: 12px;
        text-align: left;
        padding-left: 20px;
    }

    .rt .bottom s {
        font-size: 12px;
    }

    .rt .bottom i {
        position: relative;
        top: -20px;
        right: 10px;
        float: right;
        width: 15px;
        height: 30px;
        background: linear-gradient(135deg, #fff 25%, #005EA2 0,
        #005EA2 50%, #fff 0,
        #fff 75%, #005EA2 0);
        background-size: 12px 12px;
    }
</style>