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);
});
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);
},
};