Arch + XFCE install
js 调试重定向终端输出

vuejs 实时监控类页面实现

Craynic posted @ 2015年12月02日 21:44 in 未分类 , 2737 阅读

基本功能

首先创建代表单点的组件:

Vue.component('instance', {
    template: '#v-template-instance',
});

模板:

<script type="text/x-template" id='v-template-instance'>
<div :id="instance.display_name"
     :class="['per-instance', status, hotStatus, highlight]"
     @dblclick="openConsole()"
     @click="showPopover()"
     :title="instance.display_name">
</div>
</script>

其中,status等都是计算属性,通过当前点的数据计算出对应的class,并自动更新。

状态改变

载入时进行索引:

        created: function () {
            insIndex[this.instance.display_name] = this;
        },

当有数据更新时,通过索引更新数据,计算属性的值就会自动更新。

判断连接状态使用了如下计算属性:

        computed: {
            isActive: function () {
                t = this.time2number(this.instance.last_active);
                return t && t + busy_limit > this.$root.now;
            },
        }

其中,last_active存了该节点上次活跃时间,busy_limit为有效时间。通过当前时间与上次活跃时间的差判断活跃。如果在这里直接使用$.now()作为当前时间,vue是不会追中这个值的,也就是说这个计算属性的值不会随着$.now()的改变而改变(虽然可以声明不缓存此计算属性的值,但只对js调用有效,对dom无效)。在这里,我定时更新最上层组件的now值,再在这里进行计算比较。

定时更新now的值:

            ready: function () {
                var self = this;
                this.intervalId = setInterval(function () { self.now = $.now(); }, 10000)
            },
            beforeDestroy: function () {
                clearInterval(this.intervalId);
            },

搜索

通过一个计算属性来标识这个点是否匹配搜索:

        computed: {
            ifMatch: function () {
                if (!(this.$root.search)) return false;
                var toTest = [data......];
                var search = this.$root.search;
                for (str in toTest) {
                    if (toTest[str] && toTest[str].indexOf(search) >= 0) return true;
                }
                return false;
            },
        }

最上层组件的数据绑定:

<input v-model="search" type="text" placeholder="..." id="searchbox">

在组件上可以使用class,style,或者v-show来控制搜索结果的显示。

P.S.

改完一共少了一百多行代码,代码结构也清晰了,还是值得的。

  • 无匹配

登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter