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

ruoyi-ui/src/views/newstocksystem/trends/index.vue

@@ -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;
       });
     },
@@ -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,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)
+      } else if (rank > 3 && rank <= 6) {
-        return 'background:#FF9D00;color:white;text-align:center;';
+        return 'background:rgb(255, 157, 0);color:white;text-align:center;';
-      else if(this.lotTrendsList[columnIndex].sortDataList[rowIndex] <= 10 && this.lotTrendsList[columnIndex].sortDataList[rowIndex] > 6)
+      } else if (rank > 6 && rank <= 10) {
-        return 'background:#FFD000;color:white;text-align:center;';
+        return 'background:rgb(255, 208, 0);color:white;text-align:center;';
-      else
+      } 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>