var Table = { _data: [], _tableData: [], //表格内部统一格式的数据 _curPage: 1, //当前显示页码 _tPage: 1, // 总页数 _perPage: 200, //表格分页展示,单页最大数据量 _factorMode: '', _table: '', _tableCover: '', _selectIndex: ['1', '2', '3'], //第一列为时间,不变;后续默认展示3列数据 _onClick: {}, _lastSelectIndex: -1, // 正序排列比较函数 _compareDes: function (x, y) { if (x < y) { return -1; } else if (x > y) { return 1; } else { return 0; } }, // 倒序排列比较函数 _compareDesc: function (x, y) { if (x < y) { return 1; } else if (x > y) { return -1; } else { return 0; } }, /** * 新建表格 * @param {*} elementId * @param {*} data */ table: function (elementId, data, factorMode, onclick, onRow, defaultIndex) { if (defaultIndex != undefined) { this._selectIndex = defaultIndex; } this._onRow = onRow; this._onClick = onclick; this._data = []; this._data.push.apply(this._data, data); this._dataTransform(this._data); this._curPage = 1; this._tPage = Math.ceil(data.length / this._perPage); var curData = this._data.slice( this._perPage * (this._curPage - 1), this._perPage * this._curPage ); this._table = $('#' + elementId); this._table.empty(); // this._table.addClass('border-table') var thead = $(''); var trH = $(''); trH.addClass('tr-head'); var th = $(''); th.append('时间'); th.prop('num', 'time'); this.setSortListener(th); trH.append(th); var factorTypes = Object.keys(Util.factorIndex[factorMode]); for (let i = 0; i < factorTypes.length; i++) { var key = factorTypes[i]; var n = Util.factorIndex[factorMode][key]; var th = $(''); th.prop('index', key); th.prop('num', i); this.setSortListener(th); th.append(n); trH.append(th); if (this._selectIndex.indexOf(key) != -1) { th.show(); } else { th.hide(); } } thead.append(trH); this._table.append(thead); var tbody = $(''); tbody.addClass('scrollbar'); this._refreshTbody(curData, tbody); this._table.append(tbody); this._setPage(); this.refreshHeadWidth(this._table); }, /** * 增减表头列 * @param {*} index */ onChangeTh: function (index, add) { var ths = this._table.find('th'); var tds = this._table.find('td'); for (let i = 0; i < ths.length; i++) { var th = $(ths[i]); if (th.prop('index') == index) { if (add) { th.show(); } else { th.hide(); } } } for (let i = 0; i < tds.length; i++) { var td = $(tds[i]); if (td.prop('index') == index) { if (add) { td.show(); } else { td.hide(); } } } if (add) { this._selectIndex.push(index); } else { var i = this._selectIndex.indexOf(index); this._selectIndex.splice(i, 1); } }, /** * 插入新数据 * @param {*} data */ onNewData: function (data, merge) { var tbody = $(this._table.find('tbody')[0]); if (merge != true) { this._data = []; tbody.empty(); } this._data.push.apply(this._data, data); this._dataTransform(this._data); this._refreshTbody(data, tbody); // this._table.append(tbody) return this._data.length; }, _refreshTbody: function (data, tbody) { const that = this; data.forEach((e, i) => { var trC = $(''); trC.attr('id', `row-${i}`); trC.attr('index', i); trC.addClass('tr-content'); trC.on('onmouseover', function () { this.style.backgroundColor = 'var(--select_color)'; }); trC.on('onmouseout', function () { this.style.backgroundColor = 'transparent'; }); trC.on('click', function () { that.changeRowColor($(this).attr('index')); Table._onClick(e, i + (that._curPage - 1) * that._perPage); }); if (this._onRow != undefined) { this._onRow(trC, e, this._selectIndex); } else { var td = $(''); td.append(e.time.split(' ')[1]); trC.append(td); e.values.forEach((v) => { var td = $(''); td.prop('index', v.factorId); var tdV = v.factorData.toFixed(1); if (v.factorId == '17') { tdV = Util.windDir(parseInt(tdV)); } td.append(tdV); trC.append(td); if (this._selectIndex.indexOf(v.factorId) != -1) { td.show('fast'); } else { td.hide('fast'); } }); } tbody.append(trC); }); if (data.length == 0) { tbody.hide(); } else { tbody.show(); } }, refreshHeadWidth: function (table) { var _table = table; if (typeof table === 'string') { _table = $('#' + table); } var map = new Map(); var ths = _table.find('th'); var trs = $(_table.children('tbody').get(0)).children('tr'); var tds = $(trs.get(0)).children('td'); for (let i = 0; i < ths.length; i++) { let w = $(tds[i]).innerWidth(); $(ths[i]).width(function (n, c) { if (c > w) { // $(tds[i]).width(c - 4*2 - 2)//4: td的padding map.set(i, c); return c; } else { return w - 2; } }); //2: 减去两边边框 } for (const [key, value] of map) { for (let i = 0; i < trs.length; i++) { const tr = trs[i]; var tds = $(tr).children('td'); var td = $(tds[key]); var pad = td.outerWidth() - td.width(); //padding + border的宽度 td.width(value - pad); } } }, _setPage: function () { PageHelper.myPageInit({ pages: Table._tPage, currentPage: 1, element: '.my-page', callback: function (page) { Table._curPage = page; var curData = Table._data.slice( Table._perPage * (page - 1), Table._perPage * page ); var tbody = $(Table._table.find('tbody')[0]); tbody.empty(); Table._refreshTbody(curData, tbody); Table.refreshHeadWidth(Table._table); }, }); }, /** * 数据结构变换 * 给数据列表每个值添加下标属性index */ _dataTransform: function (data) { for (let i = 0; i < data.length; i++) { data[i].index = i; } }, /** * 开启均值计算 * 根据给定的表格内单元格范围,计算其均值 */ _firstData: undefined, _lastData: undefined, _oldClick: undefined, openAvg: function (callback) { this.oldClick = this._onClick; this._onClick = function (e) { if (this._firstData == undefined) { this._firstData = e; } else if (this._lastData == undefined) { this._lastData = e; // 计算均值 var i1 = this._firstData.index; var i2 = this._lastData.index; var list = this._data.slice(i1, i2 + 1); this._firstData = undefined; this._lastData = undefined; callback(list); } else { // 此分支理论上不应该出现 var i1 = this._firstData.index; var i2 = this._lastData.index; var list = this._data.slice(i1, i2 + 1); this._firstData = undefined; this._lastData = undefined; callback(list); } }; }, /** * 关闭均值计算 */ closeAvg: function () { this._onClick = this._oldClick; this._oldClick = undefined; }, /** * 给表头设置点击排序事件 * sort: 0:代表当前不以此属性排序; * 1:代表当前以此属性正序排序; * 2:代表当前以此属性倒序排序; */ setSortListener: function (th) { th.prop('sort', 0); this.lastTh = th; th.on('click', function () { var sort = th.prop('sort'); var num = th.prop('num'); // 清除上一次排序列表头的排序图案以及排序顺序 if (Table.lastTh.prop('num') != num) { Table.lastTh.prop('sort', 0); var text = Table.lastTh.html(); var i = text.indexOf('<'); if (i != -1) { text = text.substring(0, i); Table.lastTh.html(text); } Table.lastTh = th; } if (sort == 0) { th.prop('sort', 1); var text = th.html(); th.html(`${text}`); } else if (sort == 1) { th.prop('sort', 2); var text = th.html(); var i = text.indexOf('<'); text = text.substring(0, i); th.html(`${text}`); } else { th.prop('sort', 0); var text = th.html(); var i = text.indexOf('<'); text = text.substring(0, i); th.html(text); } Table._data = Table._data.sort(function (x, y) { if (sort == 0) { if (num == 'time') { return Table._compareDes(x.index, y.index); } else { return Table._compareDes( x.values[num].factorData, y.values[num].factorData ); } } else if (sort == 1) { if (num == 'time') { return Table._compareDesc(x.index, y.index); } else { return Table._compareDesc( x.values[num].factorData, y.values[num].factorData ); } } else { return Table._compareDes(x.index, y.index); } }); var curData = Table._data.slice( Table._perPage * (Table._curPage - 1), Table._perPage * Table._curPage ); var tbody = $(Table._table.find('tbody')[0]); tbody.empty(); Table._refreshTbody(curData, tbody); // Table.refreshHeadWidth(Table._table) }); }, changeRowColor(thisIndex) { const index = thisIndex % this._perPage; if (this._lastSelectIndex != -1) { $(`#row-${this._lastSelectIndex}`).css('background-color', ''); } this._lastSelectIndex = index; const row = $(`#row-${index}`); row.css('background-color', 'var(--select_color)'); var tbody = $(this._table.find('tbody')[0]); tbody.animate( { scrollTop: row.outerHeight() * index - 350 + 'px', }, 500 ); // tbody.scrollTop(0, 100); // this._table.scrollTop = 100 }, /** * 定位至索引数据处 * @param {Number} index 数据索引,从0开始 */ locate(index) { const page = Math.ceil((index + 1) / this._perPage); PageHelper.clickPageFun(page); this.changeRowColor(index); }, };