手机端实时测试数据显示更新

hdw

2019-01-16 6efaa2ba16a302cba69622587dbab95f19795279

手机端实时测试数据显示更新

 gx_tieta/WebRoot/mobil/control.html

@@ -47,7 +47,7 @@
        </ul>

        <div data-role="collapsible" data-collapsed="false">

          <h1 id="jifangzhuangtai">机房状态</h1>

          <div class="tbl-container1"></div>

          <div class="tbl-container"></div>

        </div>

        <div data-role="collapsible" data-collapsed="false">

          <h1 id="zhuangtai">电池组状态</h1>

@@ -67,9 +67,9 @@
    <script type="text/javascript" src="js/battNav.js"></script>

    <script>

        var arrTh = ['电池状态：', '端电压：', '电池电流：', '测试日期：', '测试时长：', '测试容量：', '剩余容量：', '续航时间：'];

        var tbl = $('.tbl-container').eq(0);

        var tbl = $('.tbl-container').eq(1);

        var jifangarrTh = ['SD卡','通讯计数','通信丢包率','信号强度']

        var tbl1 = $('.tbl-container1').eq(0);

        var tbl1 = $('.tbl-container').eq(0);

        var arrtdjifangstate = new Array;

        var temp = getCookie("batt");

        var batt = JSON.parse(temp);

@@ -350,7 +350,7 @@
                            var data = rs.data[0];

                            console.info(data);

                            //if(showSU) {

                                alert('读取成功', true);

                                //alert('读取成功', true);

                                var json=window.JSON.stringify(data);

                                setCookie("control_parm",json);

                                


 gx_tieta/WebRoot/mobil/js/tbl.js

@@ -257,3 +257,150 @@
        td.html(tdHtml);

    }

};


//对于手机端表格进行的二次开发

var MobileTable = function(opts) {

    this.opts = {};     // 生成表格的配置项

    this.el = '';

    this.cols = [];     // 表格的头部

    this.data = [];     // 表格的内容

    this.render(opts);

}

// 定义对象的原型函数

MobileTable.prototype = {

    _setEl: function(el) {          // 设置表格所在的容器

        if(typeof el == 'object') {

            this.el = el;

        }else {

            this.el = $(el);

        }

    }

    ,_setOpts: function(opts) {      // 设置配置项

        this.opts = opts;

    }

    ,_setCols: function(cols) {     //  设置表格的头部

        this.cols = cols;

    }

    ,_setData: function(data) {

        this.data = data;

    }

    ,_init: function(opts) {

        let cols = opts.cols;

        let data = opts.data;

        let el = opts.el;

        this._setOpts(opts);        // 初始化配置项

        this._setEl(el);            // 初始化el

        this._setCols(cols);        // 初始化头部数据

        this._setData(data);        // 初始化表格数据

    }

    ,render: function(opts) {

        this._init(opts);

        var table = $('<table data-role="table" class="ui-responsive"></table>');

        var thead = this._getThead();

        var tbody = this._getTbody();

        
        // 生成表格

        table.append(thead);

        table.append(tbody);

        // 清空容器

        this.el.text('');

        this.el.append(table).trigger('create');

    }

    ,_getThead: function() {    // 获取表格的头部

        var cols = this.cols;

        var thead = $('<thead></thead>');

        var tr = $('<tr></tr>');

        // 遍历cols的值,根据数据项thead添加内容

        for(let i=0; i<cols.length; i++) {

            let _cols = cols[i];

            var th = $('<th></th>');

            th.html(_cols.title);

            th.attr('data-field', _cols.field);

            tr.append(th)

            
        }

        thead.append(tr);

        return thead;

    }

    ,_getTbody: function() {    // 获取表格的内容

        var cols = this.cols;

        var data = this.data;

        var tbody = $('<tbody></tbody>');



        // 遍历data的值

        for(let i=0; i<data.length; i++) {

            let _data = data[i];

            let tr = $('<tr></tr>');

            // 遍历cols的值

            for(let k=0; k<cols.length; k++) {

                let _cols = cols[k];

                var field = _cols.field;

                var title = _cols.title;

                var td = $('<td></td>');

                if(field in _data) {

                    td = $('<td>'+_data[field]+'</td>');

                }

                // 设置值

                td.attr('data-field', field);

                td.attr('data-title', title);

                tr.append(td);

            }

            tr.append($('<td data-field="visibility" style="visibility: hidden"></td>'));

            // 生成tr

            tbody.append(tr);

        }



        // 返回结果

        return tbody;

    }

    ,update: function(field, fVal, data) {

        let rowsInfo = this._getRows(field, fVal);

        // 如果获取到了行号

        if(rowsInfo.code==1) {

            let rows = rowsInfo.data;       // 数据所在的行号

            this.updateTr(rows, data);

        }else {

            console.log(rowsInfo.msg);

        }

    }

    ,updateTr: function(rows, data) {

        let tbody = this.el.find('tbody');

        let tr = tbody.find('tr').eq(rows);

        let td = tr.find('td');

        // 遍历td的内容

        td.each(function() {

            let field = $(this).data('field');

            let title = $(this).data('title');

            // 判断当前属性是否在data中

            if(field in data) {

                // 生成html标记字符串

                var tdHtml = '<b class="ui-table-cell-label">'+title+'</b>';

                tdHtml += data[field];

                $(this).html(tdHtml);

            }

        });



    }

    ,_getRows: function(field, fVal) {     // 根据标识位的值获取当前数据所在的行

        var rs = {

            code: 0

            ,data: -1

            ,msg: '未获取到标识位'+field+':'+fVal+'所在的行'

        };

        var data = this.data;

        // 遍历data的值

        for(let i=0; i<data.length; i++) {

            let _data = data[i];

            if(field in _data) {

                let _fVal = _data[field];       // 获取当前数据的标识位的值

                if(_fVal == fVal) {

                    rs.code = 1;        // 标识获取到了下标

                    rs.data = i;        // 下标的值

                }

            }

        }



        // 返回结果

        return rs;

    }

};