signal_web/src/components/Watching.vue

<template>
    <div class="watching">
        <ul>
            <li v-for="l in list" :class="{'yellow':l.WarnNum != 0}">
                <span> {{l.Dettime |fmtDate }}</span>
                <em>
                    <i v-if="l.RegionName">{{l.RegionName}}</i>
                    <i v-if="l.DectectorName">{{l.DectectorName}}</i>
                    {{l.WarnString}}</em>
            </li>
            <div class="notips" v-show="!list">
                暂无数据,等待探查信号源
            </div>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                readyList: [],
            }
        },
        props: ['totalRs'],
        methods: {
            wordDisplay(word) {
                let index = 0;
                let that = this;
                    setTimeout(function () {
                        if(!word) {
                            return false
                        }
                        that.list.unshift(word[index]);
                        index = index + 1 ;
                    }, 300);
            }
        },
        watch: {
            totalRs: function (val) {
                let that = this;
                that.list = [];
                that.readyList = [];
                // 逐行显示
                if(val.RegionDetRs){
                    console.log(that.list);
                    that.wordDisplay(val.RegionDetRs);
                }
                if(val.DetRs){
                    console.log(that.list);
                    that.wordDisplay([val.DetRs]);
                }
            },
        },
        filters: {
            fmtDate: function (value) {
                if(!value){
                    return '---';
                }else{
                    return value.substr(11,8);
                }
            }
        }
    }
</script>

<style scoped>
    .watching {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .watching ul {
        width: 100%;
        height: 345px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
    }

    .watching li {
        height: 34px;
        line-height: 34px;
        padding-left: 20px;
        padding-right: 10px;
        background: rgba(0, 107, 184, 0.2);
        font-size: 14px;
        color: #6DC1FF;
        text-align: left;
        overflow: hidden;
        margin-bottom: 5px;
    }

    .watching li span {
        font-family: UnidreamLED;
        font-size: 16px;
        margin-right: 10px;
    }
    .watching li.yellow {
        color: #FFDD00;
    }
</style>