wangh
/
aucma-benchmarking-factory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改数据请求

Browse Source
master
夜笙歌 4 years ago
parent f5e2d449fc
commit 54eaae5d03
1 changed files with 225 additions and 223 deletions
Show Stats Download Patch File Download Diff File

448
ruoyi-admin/src/main/resources/static/js/scrollTable.js
Unescape Escape View File

@ -1,6 +1,6 @@
/** /**
* dynamicTable 动态表格 * dynamicTable 动态表格
* @param { Object } resource * @param { Object } resource
* @param { String } el : 指定元素 * @param { String } el : 指定元素
* @param { Array } header : 表头 * @param { Array } header : 表头
* @param { Array } data : 数据行 * @param { Array } data : 数据行
@ -15,47 +15,47 @@
* @param { Array } colWidth : 每列的宽度 * @param { Array } colWidth : 每列的宽度
*/ */
let dynamicTable = resource => { let dynamicTable = resource => {
'use strict'; 'use strict';
//检查参数类型 //检查参数类型
if (typeof resource !== 'object') { if (typeof resource !== 'object') {
console.error('未传入参数,或者参数不是Object类型'); console.error('未传入参数,或者参数不是Object类型');
return return
} }
// 检查是否传入元素 // 检查是否传入元素
const ele = resource.el; const ele = resource.el;
if (!ele) { if (!ele) {
console.error('元素获取不正确！'); console.error('元素获取不正确！');
return return
} }
/** /**
* 检查是否传入动画触发时长 * 检查是否传入动画触发时长
* 当时间小于 10 计算为秒级单位， * 当时间小于 10 计算为秒级单位，
* 大于 10 计算为毫秒级单位 * 大于 10 计算为毫秒级单位
*/ */
let timeout = resource.timeout; let timeout = resource.timeout;
if (!timeout) { if (!timeout) {
timeout = 2000 timeout = 2000
} else if (timeout < 10) { } else if (timeout < 10) {
timeout = timeout * 1000 timeout = timeout * 1000
} }
// 检查 配置元素是否传入数据 // 检查 配置元素是否传入数据
const colName = resource.header === undefined ? '' : resource.header; const colName = resource.header === undefined ? '' : resource.header;
const rowData = resource.data === undefined ? '' : resource.data; const rowData = resource.data === undefined ? '' : resource.data;
const rowNum = resource.rowNum === undefined ? '20%' : 100 / resource.rowNum + '%'; const rowNum = resource.rowNum === undefined ? '20%' : 100 / resource.rowNum + '%';
const headerBGC = resource.headerBGC === undefined ? '#999' : resource.headerBGC; const headerBGC = resource.headerBGC === undefined ? '#999' : resource.headerBGC;
const oddRowBGC = resource.oddRowBGC === undefined ? '#bbb' : resource.oddRowBGC; const oddRowBGC = resource.oddRowBGC === undefined ? '#bbb' : resource.oddRowBGC;
const evenRowBGC = resource.evenRowBGC === undefined ? '#ddd' : resource.evenRowBGC; const evenRowBGC = resource.evenRowBGC === undefined ? '#ddd' : resource.evenRowBGC;
const fontColor = resource.fontColor === undefined ? 'black' : resource.fontColor; const fontColor = resource.fontColor === undefined ? 'black' : resource.fontColor;
const indexBGC = resource.indexBGC === undefined ? '#555' : resource.indexBGC; const indexBGC = resource.indexBGC === undefined ? '#555' : resource.indexBGC;
const colIndex = resource.index === undefined ? true : resource.index; const colIndex = resource.index === undefined ? true : resource.index;
const colWidth = resource.colWidth === undefined ? false : resource.colWidth; const colWidth = resource.colWidth === undefined ? false : resource.colWidth;
const indexColor = fontColor.search(/('black')|(0{3,6})/) ? "white" : fontColor; const indexColor = fontColor.search(/('black')|(0{3,6})/) ? "white" : fontColor;
//基本table html //基本table html
const html = ` const html = `
<div class="table"> <div class="table">
<div class="thead"> <div class="thead">
<div class="tr"></div> <div class="tr"></div>
@ -63,203 +63,205 @@ let dynamicTable = resource => {
<div class="tbody"></div> <div class="tbody"></div>
</div> </div>
`; `;
//Css样式集 //Css样式集
const boxCSS = { const boxCSS = {
overflow: 'hidden', overflow: 'hidden',
background: headerBGC background: headerBGC
}; };
const tableCSS = { const tableCSS = {
color: fontColor, color: fontColor,
width: '100%', width: '100%',
height: '100%' height: '100%'
}; };
const theadCSS = { const theadCSS = {
width: '100%', width: '100%',
height: '20%' height: '20%'
}; };
const thead_trCSS = { const thead_trCSS = {
display: "flex", display: "flex",
flexWrap: "nowrap", flexWrap: "nowrap",
width: "100%", width: "100%",
height: "100%", height: "100%",
background: headerBGC, background: headerBGC,
justifyContent: "space-around" justifyContent: "space-around"
}; };
const thCSS = { const thCSS = {
justifyContent: "space-around", justifyContent: "space-around",
fontWeight: "bold" fontWeight: "bold"
}; };
const tbodyCSS = { const tbodyCSS = {
width: "100%", width: "100%",
height: '80%', height: '80%',
boxSizing: 'border-box' boxSizing: 'border-box'
}; };
const tbody_trCSS = { const tbody_trCSS = {
flexWrap: "nowrap", flexWrap: "nowrap",
width: "100%", width: "100%",
height: rowNum, height: rowNum,
justifyContent: "space-around" justifyContent: "space-around"
}; };
const trOddCSS = { const trOddCSS = {
display: "flex", display: "flex",
background: oddRowBGC background: oddRowBGC
}; };
const trEvenCSS = { const trEvenCSS = {
display: "flex", display: "flex",
background: evenRowBGC background: evenRowBGC
}; };
const th_tdCSS = { const th_tdCSS = {
color:'#59B2F6', color: '#59B2F6',
margin: 'auto 0', margin: 'auto 0',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
overflow: "hidden", overflow: "hidden",
textOverflow: 'ellipsis', textOverflow: 'ellipsis',
textAlign: 'center', textAlign: 'center',
padding: '0 4px 0 4px' padding: '0 4px 0 4px'
}; };
const indexCSS = { const indexCSS = {
display: 'inline-block', display: 'inline-block',
width: '90%', width: '90%',
height: "90%", height: "90%",
background: indexBGC, background: indexBGC,
color: indexColor, color: indexColor,
borderRadius: '20%', borderRadius: '20%',
margin: 'auto' margin: 'auto'
}; };
//插入table元素 //插入table元素
$(ele).append(html); $(ele).append(html);
//核心代码 //核心代码
//遍历插入数据 表头 //遍历插入数据 表头
if (colIndex) { if (colIndex) {
$(ele + '>.table>.thead>.tr').append('<div class="th"><span class="index">#</span></div>') $(ele + '>.table>.thead>.tr').append('<div class="th"><span class="index">#</span></div>')
} }
colName.forEach(element => { colName.forEach(element => {
$(ele + '>.table>.thead>.tr').append(`<div class="th">${element}</div>`) $(ele + '>.table>.thead>.tr').append(`<div class="th">${element}</div>`)
}); });
//遍历插入数据 数据行 //遍历插入数据 数据行
for (let i = 0; i < rowData.length; i++) { for (let i = 0; i < rowData.length; i++) {
$(ele + '>.table>.tbody').append('<div class="tr"></div>'); $(ele + '>.table>.tbody').append('<div class="tr"></div>');
if (colIndex) { if (colIndex) {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td"><span class="index">${i+1}</span></div>`) `<div class="td"><span class="index">${i + 1}</span></div>`)
} }
rowData[i].forEach(element => { rowData[i].forEach(element => {
if (element == "一级") { if (element == "一级") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" ><img src="img/firstAlarm.png" alt="一级报警" width="30%" height="30%" /></div>` `<div class="td" ><img src="img/firstAlarm.png" alt="一级报警" width="30%" height="30%" /></div>`
) )
} else if (element == "二级") { } else if (element == "二级") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" ><img src="img/secondAlarm.png" alt="二级报警" width="30%" height="30%" /></div>` `<div class="td" ><img src="img/secondAlarm.png" alt="二级报警" width="30%" height="30%" /></div>`
) )
} else if (element == "三级") { } else if (element == "三级") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" ><img src="img/thirdlyAlarm.png" alt="三级报警" width="30%" height="30%" /></div>` `<div class="td" ><img src="img/thirdlyAlarm.png" alt="三级报警" width="30%" height="30%" /></div>`
) )
} else if (element == "未处理") { } else if (element == "未处理") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" Style="border:1px solid #D81F29;border-radius: 6px;background-color:#941D3B;color:white">${element}</div>` `<div class="td" Style="border:1px solid #D81F29;border-radius: 6px;background-color:#941D3B;color:white">${element}</div>`
) )
} else if (element == "处理中") { } else if (element == "处理中") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" Style="border:1px solid #E08018;border-radius: 6px;background-color:#935A2F;color:white">${element}</div>` `<div class="td" Style="border:1px solid #E08018;border-radius: 6px;background-color:#935A2F;color:white">${element}</div>`
) )
} else if (element == "已结束") { } else if (element == "已结束") {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append( $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
`<div class="td" Style="border:1px solid #0FF4D5;border-radius: 6px;background-color:#0B9EA9;color:white">${element}</div>` `<div class="td" Style="border:1px solid #0FF4D5;border-radius: 6px;background-color:#0B9EA9;color:white">${element}</div>`
) )
} else { } else {
$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`<div class="td">${element}</div>`) $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`<div class="td">${element}</div>`)
} }
}) })
} }
//设置CSS样式 //设置CSS样式
$(ele).css(boxCSS); $(ele).css(boxCSS);
$(ele + '>.table').css(tableCSS); $(ele + '>.table').css(tableCSS);
$(ele + '>.table>.thead').css(theadCSS); $(ele + '>.table>.thead').css(theadCSS);
$(ele + '>.table>.thead>.tr').css(thead_trCSS); $(ele + '>.table>.thead>.tr').css(thead_trCSS);
$(ele + '>.table>.thead>.tr>.th').css(th_tdCSS).css(thCSS); $(ele + '>.table>.thead>.tr>.th').css(th_tdCSS).css(thCSS);
$(ele + '>.table>.tbody').css(tbodyCSS); $(ele + '>.table>.tbody').css(tbodyCSS);
$(ele + '>.table>.tbody>.tr').css(tbody_trCSS); $(ele + '>.table>.tbody>.tr').css(tbody_trCSS);
$(ele + '>.table>.tbody>.tr:odd').css(trOddCSS); $(ele + '>.table>.tbody>.tr:odd').css(trOddCSS);
$(ele + '>.table>.tbody>.tr:even').css(trEvenCSS); $(ele + '>.table>.tbody>.tr:even').css(trEvenCSS);
$(ele + '>.table>.tbody>.tr>.td').css(th_tdCSS); $(ele + '>.table>.tbody>.tr>.td').css(th_tdCSS);
$(ele + '>.table span.index').css(indexCSS) $(ele + '>.table span.index').css(indexCSS)
//统一计量单位 //统一计量单位
const emptyUnit = element => element.replace(/[^0-9]/g, ''); const emptyUnit = element => element.replace(/[^0-9]/g, '');
const hendlen = $(`${ele}>.table>.thead>.tr>.th`).length; const hendlen = $(`${ele} > .table > .thead > .tr > .th`).length;
const bodylen = $(`${ele}>.table>.tbody>.tr:nth-child(1)>.td`).length; const bodylen = $(`${ele} > .table > .tbody > .tr:nth-child(1) > .td`).length;
const ceil = Math.ceil; const ceil = Math.ceil;
/** /**
* 设置每列的宽度 * 设置每列的宽度
* eq() 是在匹配的元素中取下标为n的元素 * eq() 是在匹配的元素中取下标为n的元素
* nth-child() 是在匹配元素的父元素中选择第n个元素 * nth-child() 是在匹配元素的父元素中选择第n个元素
*/ */
if (!colWidth) { if (!colWidth) {
$(`${ele}>.table>.thead>.tr>.th`).css({ $(`${ele} > .table > .thead > .tr > .th`).css({
width: ceil(100 / hendlen) + '%' width: ceil(100 / hendlen) + '%'
}); });
$(`${ele}>.table>.tbody>.tr>.td`).css({ $(`${ele} > .table > .tbody > .tr > .td`).css({
width: ceil(100 / bodylen) + '%' width: ceil(100 / bodylen) + '%'
}); });
} else { } else {
for (let i = 0; i < colWidth.length; i++) { for (let i = 0; i < colWidth.length; i++) {
let emptyUnitColWidth = emptyUnit(colWidth[i]); let emptyUnitColWidth = emptyUnit(colWidth[i]);
console.log(emptyUnitColWidth) console.log(emptyUnitColWidth)
$(`${ele}>.table>.thead>.tr>.th:nth-child(${i+1})`).width(`${emptyUnitColWidth}%`); $(`${ele} > .table > .thead > .tr > .th:nth-child(${i + 1})`).width(`${emptyUnitColWidth}%`);
$(`${ele}>.table>.tbody>.tr>.td:nth-child(${i+1})`).width(`${emptyUnitColWidth}%`); $(`${ele} > .table > .tbody > .tr > .td:nth-child(${i + 1})`).width(`${emptyUnitColWidth}%`);
} }
} }
// 组件销毁钩子 // 组件销毁钩子
$(`${ele}`).bind('DOMNodeRemoved', (e) => { $(`${ele}`).bind('DOMNodeRemoved', (e) => {
if (e.target.classList[0] === 'asit-table') { if (e.target.classList[0] === 'asit-table') {
clearInterval(animation); clearInterval(animation);
} }
}); });
} }
const tableAnimation = (el) => { const tableAnimation = (el) => {
const evenRowBGC = 'rgba(6,25,57,0.2)' === undefined ? '#ddd' : 'rgba(6,25,57,0.2)'; const evenRowBGC = 'rgba(6,25,57,0.2)' === undefined ? '#ddd' : 'rgba(6,25,57,0.2)';
const oddRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#bbb' : 'rgba(8,36,75,0.2)'; const oddRowBGC = 'rgba(8,36,75,0.2)' === undefined ? '#bbb' : 'rgba(8,36,75,0.2)';
const trEvenCSS = { const trEvenCSS = {
display: "flex", display: "flex",
background: evenRowBGC background: evenRowBGC
}; };
const trOddCSS = { const trOddCSS = {
display: "flex", display: "flex",
background: oddRowBGC background: oddRowBGC
}; };
let oddORevenCheck = $(`${el}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd'; let oddORevenCheck = $(`${el} > .table > .tbody > .tr`).length % 2 == 0 ? 'even' : 'odd';
setInterval(function () { setInterval(function () {
$(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () { $(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () {
switch (oddORevenCheck) { switch (oddORevenCheck) {
case 'even': case 'even':
$(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody'); $(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody');
oddORevenCheck = 'odd'; oddORevenCheck = 'odd';
break; break;
case 'odd': case 'odd':
$(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody'); $(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody');
oddORevenCheck = 'even'; oddORevenCheck = 'even';
break; break;
} }
$(this).remove(); $(this).remove();
}); });
}, 2000); }, 2000);
} }
const flip = (el,time = 2000) => { const flip = (el, time = 2000) => {
console.log($(el + '>.table>.tbody').scrollTop()) console.log($(el + '>.table>.tbody').scrollTop())
console.log($(el + '>.table>.tbody').outerHeight(true)) console.log($(el + '>.table>.tbody').outerHeight(true))
$(el + '>.table>.tbody').animate({ setInterval(function () {
scrollTop: $(el + '>.table>.tbody').scrollTop() + $(el + '>.table>.tbody').outerHeight(true) $(el + '>.table>.tbody').animate({
},time) scrollTop: $(el + '>.table>.tbody').scrollTop() + $(el + '>.table>.tbody').outerHeight(true)
}, 2000)
}, time)
} }
Write Preview
Loading…
Cancel
Save