From 62ad51c3b2dc7d5972f7ed97381dc27a6409f0fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Thu, 14 Jul 2022 18:08:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E8=AF=B7?=
=?UTF-8?q?=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../main/resources/static/js/echartsCommon.js | 2 +-
.../main/resources/static/js/scrollTable.js | 258 ++++++++++++++++++
.../main/resources/templates/broad/fp.html | 27 +-
3 files changed, 281 insertions(+), 6 deletions(-)
create mode 100644 ruoyi-admin/src/main/resources/static/js/scrollTable.js
diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
index 5a7c317..941f7ac 100644
--- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
+++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
@@ -311,7 +311,7 @@ const barChartAndLineChart = function (data, id) {
type: "bar",
barWidth: vw,
label: {
- show: false,
+ show: true,
position: "top",
textStyle: {
color: "#fff",
diff --git a/ruoyi-admin/src/main/resources/static/js/scrollTable.js b/ruoyi-admin/src/main/resources/static/js/scrollTable.js
new file mode 100644
index 0000000..9520df9
--- /dev/null
+++ b/ruoyi-admin/src/main/resources/static/js/scrollTable.js
@@ -0,0 +1,258 @@
+/**
+ * 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 = `
+
+ `;
+ //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('#
')
+ }
+ colName.forEach(element => {
+ $(ele + '>.table>.thead>.tr').append(`${element}
`)
+ });
+
+ //遍历插入数据 数据行
+ for (let i = 0; i < rowData.length; i++) {
+
+ $(ele + '>.table>.tbody').append('');
+ if (colIndex) {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ `${i+1}
`)
+ }
+ rowData[i].forEach(element => {
+ if (element == "一级") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ ``
+ )
+ } else if (element == "二级") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ ``
+ )
+ } else if (element == "三级") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ ``
+ )
+ } else if (element == "未处理") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ `${element}
`
+ )
+ } else if (element == "处理中") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ `${element}
`
+ )
+ } else if (element == "已结束") {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(
+ `${element}
`
+ )
+ } else {
+ $(ele + '>.table>.tbody>.tr:eq(' + i + ')').append(`${element}
`)
+ }
+
+ })
+
+ }
+
+ //设置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);
+}
\ No newline at end of file
diff --git a/ruoyi-admin/src/main/resources/templates/broad/fp.html b/ruoyi-admin/src/main/resources/templates/broad/fp.html
index 6840983..3a74c3c 100644
--- a/ruoyi-admin/src/main/resources/templates/broad/fp.html
+++ b/ruoyi-admin/src/main/resources/templates/broad/fp.html
@@ -351,6 +351,7 @@
+
