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 = $('<thead></thead>');
|
var trH = $('<tr></tr>');
|
trH.addClass('tr-head');
|
|
var th = $('<th></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></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></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 = $('<tr></tr>');
|
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></td>');
|
td.append(e.time.split(' ')[1]);
|
trC.append(td);
|
e.values.forEach((v) => {
|
var td = $('<td></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}<i class="fa fa-caret-up" aria-hidden="true"></i>`);
|
} else if (sort == 1) {
|
th.prop('sort', 2);
|
var text = th.html();
|
var i = text.indexOf('<');
|
text = text.substring(0, i);
|
th.html(`${text}<i class="fa fa-caret-down" aria-hidden="true"></i>`);
|
} 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);
|
},
|
};
|
