Lxy
/
RuoYi-Vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 动量前后端页面调整完毕

Browse Source
dev_refactor_0120_qoder
Lxy 4 months ago
parent df64d3e0c3
commit 79e5fe9417
1 changed files with 327 additions and 25 deletions
Show Stats Download Patch File Download Diff File

336
ruoyi-ui/src/views/newstocksystem/trends/index.vue
Unescape View File

@ -50,31 +50,42 @@
<el-row :gutter="20">
<el-col :xs="24" :sm="24" :md="24" :lg="24">
<div style="border-bottom: solid 2px #A9A4A4;margin: 10px 0 10px 0;height: 30px;">
<span id="lotDistribute">{{ queryParams.type }}日趋势板块</span>
<span id="lotDistribute">{{ queryParams.momentumType }}日趋势板块</span>
</div>
<el-tabs type="border-card">
<el-tab-pane>
<span slot="label"><el-icon type="primary" plain circle size = "mini" class="el-icon-medal-1" style="border: 0px;"></el-icon> 动量趋势</span>
<el-table :data="this.lotTrendsList[0].sortDataList"
<el-table :data="trendsData"
height='560'
style="width: 100%;"
empty-text="暂无数据"
tooltip-effect="dark"
@cell-click="handleClickTable"
:cell-style="trendCellStyle"
:key="itemKey"
v-loading="loading"
row-key="industryName"
>
<template v-for="item in this.lotTrendsList">
<!-- 行业名称列 -->
<el-table-column
:label="item.title"
prop="industryName"
label="行业名称"
class="active"
fixed="left"
width="120"
></el-table-column>
<!-- 交易日期列，动态生成 -->
<el-table-column
v-for="date in dateColumns"
:key="date"
:prop="date"
:label="date"
class="active"
>
<template slot-scope="scope">
<span>{{ item.sortDataList[scope.$index] }}</span>
<div :class="getRankClass(scope.row[date])">{{ scope.row[date] === -1 ? '' : scope.row[date] }}</div>
</template>
</el-table-column>
</template>
</el-table>
</el-tab-pane>
</el-tabs>
@ -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;
});
},
@ -157,17 +182,87 @@ 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';
}
}
}
}
</script>
@ -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;
}
</style>
Write Preview
Loading…
Cancel
Save