aucma-scada-visual-board-new/productionboard/target/classes/static/js/common/scrollTable.js

/**
 * dynamicTable 动态表格
 * @param { Object }  resource 
 * @param { String }  el : 指定元素
 * @param { Array }   header : 表头
 * @param { Array }   data : 数据行
 * @param { Number }  rowNum : 显示行数
 * @param { Boolean } index : 是否显示索引列
 * @param { Number }  timeout : 滚动动画延时
 * @param { String }  headerBGC : 标题栏背景颜色
 * @param { String }  oddRowBGC : 奇数行背景颜色
 * @param { String }  evenRowBGC : 偶数行背景颜色
 * @param { String }  fontColor : 字体颜色
 * @param { String }  indexBGC : 索引列背景颜色
 * @param { Array }   colWidth : 每列的宽度
 */
let dynamicTable = resource => {
	'use strict';

	//检查参数类型
	if (typeof resource !== 'object') {
		console.error('未传入参数,或者参数不是Object类型');
		return
	}

	// 检查是否传入元素
	const ele = resource.el;
	if (!ele) {
		console.error('元素获取不正确！');
		return
	}
	/**
	 * 检查是否传入动画触发时长
	 * 当时间小于 10 计算为秒级单位，
	 * 大于 10 计算为毫秒级单位
	 */
	let timeout = resource.timeout;
	if (!timeout) {
		timeout = 2000
	} else if (timeout < 10) {
		timeout = timeout * 1000
	}

	// 检查 配置元素是否传入数据
	const colName = resource.header === undefined ? '' : resource.header;
	const rowData = resource.data === undefined ? '' : resource.data;
	const rowNum = resource.rowNum === undefined ? '20%' : 100 / resource.rowNum + '%';
	const headerBGC = resource.headerBGC === undefined ? '#999' : resource.headerBGC;
	const oddRowBGC = resource.oddRowBGC === undefined ? '#bbb' : resource.oddRowBGC;
	const evenRowBGC = resource.evenRowBGC === undefined ? '#ddd' : resource.evenRowBGC;
	const fontColor = resource.fontColor === undefined ? 'black' : resource.fontColor;
	const indexBGC = resource.indexBGC === undefined ? '#555' : resource.indexBGC;
	const colIndex = resource.index === undefined ? true : resource.index;
	const colWidth = resource.colWidth === undefined ? false : resource.colWidth;
	const indexColor = fontColor.search(/('black')|(0{3,6})/) ? "white" : fontColor;

	//基本table html
	const html = `
                <div class="table">
                    <div class="thead">
                        <div class="tr"></div>
                    </div>
                    <div class="tbody"></div>
                </div>
            `;
	//Css样式集
	const boxCSS = {
		overflow: 'hidden',
		background: headerBGC
	};
	const tableCSS = {
		color: fontColor,
		width: '100%',
		height: '100%'
	};
	const theadCSS = {
		width: '100%',
		height: '20%'
	};
	const thead_trCSS = {
		display: "flex",
		flexWrap: "nowrap",
		width: "100%",
		height: "100%",
		background: headerBGC,
		justifyContent: "space-around"
	};
	const thCSS = {
		justifyContent: "space-around",
		fontWeight: "bold"
	};
	const tbodyCSS = {
		width: "100%",
		height: '80%',
		boxSizing: 'border-box'
	};
	const tbody_trCSS = {
		flexWrap: "nowrap",
		width: "100%",
		height: rowNum,
		justifyContent: "space-around"
	};
	const trOddCSS = {
		display: "flex",
		background: oddRowBGC
	};
	const trEvenCSS = {
		display: "flex",
		background: evenRowBGC
	};
	const th_tdCSS = {
		color:'#59B2F6',
		margin: 'auto 0',
		whiteSpace: 'nowrap',
		overflow: "hidden",
		textOverflow: 'ellipsis',
		textAlign: 'center',
		padding: '0 4px 0 4px'
	};
	const indexCSS = {
		display: 'inline-block',
		width: '90%',
		height: "90%",
		background: indexBGC,
		color: indexColor,
		borderRadius: '20%',
		margin: 'auto'
	};
	//插入table元素
	$(ele).append(html);

	//核心代码
	//遍历插入数据 表头
	if (colIndex) {
		$(ele + '>.table>.thead>.tr').append('<div class="th"><span class="index">#</span></div>')
	}
	colName.forEach(element => {
		$(ele + '>.table>.thead>.tr').append(`<div class="th">${element}</div>`)
	});

	//遍历插入数据 数据行
	for (let i = 0; i < rowData.length; i++) {

		$(ele + '>.table>.tbody').append('<div class="tr"></div>');
		if (colIndex) {
			$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
				`<div class="td"><span class="index">${i+1}</span></div>`)
		}
		rowData[i].forEach(element => {
			if (element == "一级") {
				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
					`<div class="td" ><img src="img/firstAlarm.png" alt="一级报警" width="30%" height="30%" /></div>`
					)
			} else if (element == "二级") {
				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
					`<div class="td" ><img src="img/secondAlarm.png" alt="二级报警" width="30%" height="30%" /></div>`
					)
			} else if (element == "三级") {
				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
					`<div class="td" ><img src="img/thirdlyAlarm.png" alt="三级报警" width="30%" height="30%" /></div>`
					)
			} else if (element == "未处理") {
				$(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>`
					)
			} else if (element == "处理中") {
				$(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>`
					)
			} else if (element == "已结束") {
				$(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>`
					)
			} else {
				$(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`<div class="td">${element}</div>`)
			}

		})

	}

	//设置CSS样式
	$(ele).css(boxCSS);
	$(ele + '>.table').css(tableCSS);
	$(ele + '>.table>.thead').css(theadCSS);
	$(ele + '>.table>.thead>.tr').css(thead_trCSS);
	$(ele + '>.table>.thead>.tr>.th').css(th_tdCSS).css(thCSS);
	$(ele + '>.table>.tbody').css(tbodyCSS);
	$(ele + '>.table>.tbody>.tr').css(tbody_trCSS);
	$(ele + '>.table>.tbody>.tr:odd').css(trOddCSS);
	$(ele + '>.table>.tbody>.tr:even').css(trEvenCSS);
	$(ele + '>.table>.tbody>.tr>.td').css(th_tdCSS);
	$(ele + '>.table span.index').css(indexCSS)

	//统一计量单位
	const emptyUnit = element => element.replace(/[^0-9]/g, '');
	const hendlen = $(`${ele}>.table>.thead>.tr>.th`).length;
	const bodylen = $(`${ele}>.table>.tbody>.tr:nth-child(1)>.td`).length;
	const ceil = Math.ceil;

	/**
	 * 设置每列的宽度
	 * eq() 是在匹配的元素中取下标为n的元素
	 * nth-child() 是在匹配元素的父元素中选择第n个元素
	 */
	if (!colWidth) {
		$(`${ele}>.table>.thead>.tr>.th`).css({
			width: ceil(100 / hendlen) + '%'
		});
		$(`${ele}>.table>.tbody>.tr>.td`).css({
			width: ceil(100 / bodylen) + '%'
		});
	} else {
		for (let i = 0; i < colWidth.length; i++) {
			let emptyUnitColWidth = emptyUnit(colWidth[i]);
			console.log(emptyUnitColWidth)
			$(`${ele}>.table>.thead>.tr>.th:nth-child(${i+1})`).width(`${emptyUnitColWidth}%`);
			$(`${ele}>.table>.tbody>.tr>.td:nth-child(${i+1})`).width(`${emptyUnitColWidth}%`);
		}
	}


	// 组件销毁钩子
	$(`${ele}`).bind('DOMNodeRemoved', (e) => {
		if (e.target.classList[0] === 'asit-table') {
			clearInterval(animation);
		}
	});
}

const tableAnimation = (el) => {
	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 trEvenCSS = {
		display: "flex",
		background: evenRowBGC
	};
	const trOddCSS = {
		display: "flex",
		background: oddRowBGC
	};
	let oddORevenCheck = $(`${el}>.table>.tbody>.tr`).length % 2 == 0 ? 'even' : 'odd';
	setInterval(function () {
		$(el + '>.table>.tbody>.tr:eq(0)').slideToggle(100, function () {
			switch (oddORevenCheck) {
				case 'even':
					$(this).clone().css(trEvenCSS).appendTo(el + '>.table>.tbody');
					oddORevenCheck = 'odd';
					break;
				case 'odd':
					$(this).clone().css(trOddCSS).appendTo(el + '>.table>.tbody');
					oddORevenCheck = 'even';
					break;
			}
			$(this).remove();
		});
	}, 2000);
}