diff --git a/ruoyi-ui/src/views/newstocksystem/trends/index.vue b/ruoyi-ui/src/views/newstocksystem/trends/index.vue index 794c9ef..fde72f3 100644 --- a/ruoyi-ui/src/views/newstocksystem/trends/index.vue +++ b/ruoyi-ui/src/views/newstocksystem/trends/index.vue @@ -50,31 +50,42 @@
- {{ queryParams.type }}日趋势板块 + {{ queryParams.momentumType }}日趋势板块
动量趋势 - - + + + + + + + @@ -99,8 +110,10 @@ export default { showSearch: true, // 总条数 total: 0, - // 动量结果表格数据,需要初始化,否则第一次加载会报错 - lotTrendsList: [{sortDataList:[]}], + // 动量结果表格数据 + trendsData: [], + // 日期列,用于动态生成表格列 + dateColumns: [], // 查询参数 queryParams: { pageNum: 1, @@ -129,9 +142,21 @@ export default { getListSection() { this.loading = true; listTrendsSection(this.queryParams).then(response => { - this.lotTrendsList = response.rows; + // 设置表格数据 + this.trendsData = response.rows; + + // 提取所有交易日期列,并按照倒序排列 + if (response.rows && response.rows.length > 0) { + // 获取第一个行业的所有属性,过滤掉industryName,得到所有交易日期 + const firstIndustry = response.rows[0]; + const dates = Object.keys(firstIndustry).filter(key => key !== 'industryName'); + // 按照倒序排列日期 + this.dateColumns = dates.sort((a, b) => new Date(b) - new Date(a)); + } else { + this.dateColumns = []; + } + this.itemKey = Math.random(); - document.getElementById('lotDistribute').innerText = this.queryParams.momentumType + "日趋势板块"; this.loading = false; }); }, @@ -141,7 +166,7 @@ export default { this.getLastTradeDate(); }, handleClickTable(row, column) { - console.log("handleClickTable : ",row, column.label); + console.log("handleClickTable : ", row, column.label); }, dateChanged() { this.getListSection(); @@ -157,16 +182,86 @@ export default { handleSelect(item) { console.log("handleSelect : ", item); }, - //修改单元格样式 + // 格式化排名,将-1转换为空字符串 + formatRank(row, column, cellValue) { + // 调试:查看cellValue的实际值和类型 + console.log('formatRank:', cellValue, typeof cellValue); + + // 处理各种可能的数据类型:数字、字符串、null、undefined等 + if (cellValue === -1 || cellValue === '-1' || cellValue === null || cellValue === undefined) { + return '-1'; + } + + // 如果是字符串,尝试转换为数字后再判断 + if (typeof cellValue === 'string') { + const numValue = parseInt(cellValue, 10); + if (!isNaN(numValue) && numValue === -1) { + return '-1'; + } + } + + return cellValue; + }, + // 修改单元格样式 trendCellStyle({row, column, rowIndex, columnIndex}) { - if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 3 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 0) + // 跳过行业名称列 + if (columnIndex === 0) { + return 'text-align:center;'; + } + + // 获取当前单元格的排名值 + let rank = row[column.property]; + + // 确保rank是数字类型 + if (rank === '' || rank === null || rank === undefined) { + return 'text-align:center;'; + } + + // 将rank转换为数字 + rank = Number(rank); + + // 检查rank是否为有效数字 + if (isNaN(rank)) { + return 'text-align:center;'; + } + + // 根据rank值设置不同的背景颜色 + if (rank > 0 && rank <= 3) { return 'background:red;color:white;text-align:center;'; - else if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 6 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 3) - return 'background:#FF9D00;color:white;text-align:center;'; - else if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 10 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 6) - return 'background:#FFD000;color:white;text-align:center;'; - else + } else if (rank > 3 && rank <= 6) { + return 'background:rgb(255, 157, 0);color:white;text-align:center;'; + } else if (rank > 6 && rank <= 10) { + return 'background:rgb(255, 208, 0);color:white;text-align:center;'; + } else { return 'text-align:center;'; + } + }, + + // 根据排名值获取对应的CSS类名 + getRankClass(rank) { + // 确保rank是数字类型 + if (rank === '' || rank === null || rank === undefined) { + return 'rank-default'; + } + + // 将rank转换为数字 + rank = Number(rank); + + // 检查rank是否为有效数字 + if (isNaN(rank)) { + return 'rank-default'; + } + + // 根据rank值返回对应的CSS类名 + if (rank > 0 && rank <= 3) { + return 'rank-top3'; + } else if (rank > 3 && rank <= 6) { + return 'rank-top6'; + } else if (rank > 6 && rank <= 10) { + return 'rank-top10'; + } else { + return 'rank-default'; + } } } } @@ -197,4 +292,211 @@ export default { .clearfix:after { clear: both; } + +/* 表格基础样式,确保边框合并,没有边距 */ +.el-table { + border-collapse: collapse !important; + border-spacing: 0 !important; + border: none !important; + background-color: transparent !important; +} + +/* 移除表格的所有边框和内边距 */ +.el-table th, +.el-table td { + border: none !important; + padding: 0 !important; + margin: 0 !important; + line-height: 1.5 !important; + background-color: transparent !important; +} + +/* 移除表格单元格的默认内边距、边框和外边距 */ +.el-table .el-table__body-wrapper .el-table__body .el-table__row .el-table__cell { + padding: 0 !important; + border: none !important; + margin: 0 !important; + background-color: transparent !important; + box-shadow: none !important; + height: auto !important; + min-height: auto !important; + line-height: 1.5 !important; +} + +/* 移除表格行的默认边距、边框和背景色 */ +.el-table .el-table__body-wrapper .el-table__body .el-table__row { + margin: 0 !important; + border: none !important; + background-color: transparent !important; + box-shadow: none !important; + line-height: 1.5 !important; + border-bottom: none !important; +} + +/* 移除表格边框和背景色 */ +.el-table__inner-wrapper, +.el-table__body-wrapper, +.el-table__header-wrapper { + border: none !important; + background-color: transparent !important; + box-shadow: none !important; +} + +/* 确保表格内容区域没有边框和背景色 */ +.el-table__body, +.el-table__header { + border: none !important; + background-color: transparent !important; +} + +/* 排名单元格样式 - 确保填充整个单元格 */ +.rank-top3 { + background: red !important; + color: white; + text-align: center; + width: 100% !important; + height: 100% !important; + display: block; + padding: 8px 0 !important; + margin: 0 !important; + border: none !important; + box-shadow: none !important; + line-height: 1.5 !important; + min-height: 30px !important; +} + +.rank-top6 { + background: rgb(255, 157, 0) !important; + color: white; + text-align: center; + width: 100% !important; + height: 100% !important; + display: block; + padding: 8px 0 !important; + margin: 0 !important; + border: none !important; + box-shadow: none !important; + line-height: 1.5 !important; + min-height: 30px !important; +} + +.rank-top10 { + background: rgb(255, 208, 0) !important; + color: white; + text-align: center; + width: 100% !important; + height: 100% !important; + display: block; + padding: 8px 0 !important; + margin: 0 !important; + border: none !important; + box-shadow: none !important; + line-height: 1.5 !important; + min-height: 30px !important; +} + +.rank-default { + text-align: center; + width: 100% !important; + height: 100% !important; + display: block; + padding: 8px 0 !important; + margin: 0 !important; + border: none !important; + box-shadow: none !important; + background-color: #ffffff !important; + line-height: 1.5 !important; + min-height: 30px !important; +} + +/* 确保表格没有任何边框或阴影 */ +.el-table--border, +.el-table--group { + border: none !important; +} + +.el-table--border th, +.el-table--border td { + border: none !important; +} + +.el-table--border .el-table__body-wrapper { + border: none !important; +} + +.el-table--border::after, +.el-table--group::after, +.el-table::before { + background-color: transparent !important; + height: 0 !important; + width: 0 !important; + box-shadow: none !important; + display: none !important; +} + +/* 确保行之间没有分隔线 */ +.el-table__body-wrapper .el-table__body tr { + border-bottom: none !important; + background-color: transparent !important; +} + +.el-table__body-wrapper .el-table__body tr:hover { + background-color: transparent !important; +} + +/* 确保行之间没有任何间距 */ +.el-table__body-wrapper .el-table__body tr td { + border-bottom: none !important; + border-top: none !important; + background-color: transparent !important; +} + +/* 确保单元格内容没有额外的边距 */ +.el-table__body-wrapper .el-table__body .el-table__row .el-table__cell > * { + margin: 0 !important; + padding: 0 !important; + border: none !important; + width: 100% !important; + height: 100% !important; + display: block; +} + +/* 移除表头和表尾的样式 */ +.el-table__header-wrapper, +.el-table__footer-wrapper { + border: none !important; + background-color: transparent !important; +} + +/* 移除表格的滚动条区域样式 */ +.el-table__body-wrapper { + border: none !important; + background-color: transparent !important; + box-shadow: none !important; +} + +/* 移除表格的所有可能的分隔线 */ +.el-table__separator { + display: none !important; + width: 0 !important; + height: 0 !important; +} + +/* 确保表格容器没有额外的样式 */ +.el-table__inner-wrapper { + border: none !important; + background-color: transparent !important; + box-shadow: none !important; +} + +/* 确保整个表格区域没有任何边框或阴影 */ +.el-table__header { + border: none !important; + background-color: transparent !important; +} + +/* 确保行悬停时没有样式变化 */ +.el-table__body tr:hover > td.el-table__cell { + background-color: transparent !important; +} \ No newline at end of file