no message

src/components/chart/RankList.vue

@@ -3,17 +3,18 @@
     <h4 class="title">{{ title }}</h4>
     <div class="header">
       <span>序号</span>
-      <span>托盘号</span>
+      <span class="workstation-col">工作站</span>
-      <span>物料编码</span>
+      <span>任务</span>
-      <span>类型</span>
+      <span>任务数</span>
+      <span>状态</span>
     </div>
     <ul class="list" :style="{ height: height ? `${height}px` : 'auto', overflow: 'auto' }">
-
       <li :key="index" v-for="(item, index) in list" v-if="list.length>0">
         <span :class="'active'">{{ index + 1 }}</span>
-        <span>{{ item.stockName }}</span>
+        <span class="workstation-col">{{ item.workstation }}</span>
-        <span>{{ item.itemCode }}</span>
+        <span>{{ item.taskName }}</span>
-        <span>{{ item.type }}</span>
+        <span>{{ item.taskCount  }}</span>
+        <span>{{ item.taskStatus }}</span>
       </li>
       <li v-else>
         <a-empty style="margin-left: 50px"/>
@@ -45,40 +46,82 @@
 
 <style lang="less" scoped>
   .rank {
-    padding: 0 32px 32px 72px;
+    padding: 0 16px 16px 16px; /* 进一步减少左右内边距 */
+    width: 100%;
+    box-sizing: border-box;
+    /* 确保没有横向溢出 */
+    overflow: hidden;
 
     .list {
       list-style: none;
+      width: 100%;
+      /* 防止横向溢出 */
+      overflow: hidden;
 
       li {
         margin-top: 16px;
-        display: flex; /* 使用 flex 布局更方便控制对齐 */
+        display: flex;
-        align-items: center; /* 垂直居中 */
+        align-items: center;
+        width: 100%;
+        /* 防止横向溢出 */
+        overflow: hidden;
 
         span {
-          font-size: 14px;
+          font-size: 13px;
-          line-height: 22px;
+          line-height: 20px;
-          text-align: center; /* 所有列都居中对齐 */
+          text-align: center;
-          flex: 1; /* 平均分配宽度 */
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          padding: 0 6px; /* 进一步减少内边距 */
+          box-sizing: border-box;
 
           &:first-child {
             background-color: #f5f5f5;
             color: rgba(0, 0, 0, 0.65);
             border-radius: 20px;
             display: inline-block;
-            font-size: 12px;
+            font-size: 11px;
             font-weight: 600;
-            margin-right: 24px;
+            margin-right: 8px; /* 进一步减少序号列的右边距 */
             height: 20px;
             line-height: 20px;
             width: 20px;
             text-align: center;
-            flex: none; /* 关键：不参与 flex 布局伸缩 */
+            padding: 0;
+            flex: 0 0 20px !important; /* 使用important确保固定宽度 */
+            min-width: 20px !important; /* 使用important确保最小宽度 */
           }
+
           &.active {
             background-color: #314659;
             color: #fff;
           }
+
+          /* 重新分配5列的空间比例 */
+          &:nth-child(2) { /* 工作站列 */
+            text-align: left;
+            flex: 1.5; /* 适当减少工作站列的比例 */
+            min-width: 130px;
+          }
+
+          &:nth-child(3) { /* 任务列 */
+            text-align: left;
+            flex: 0.9; /* 适当减少任务列的比例 */
+            min-width: 90px;
+          }
+
+          &:nth-child(4) { /* 任务数列 */
+            text-align: center;
+            flex: 0.6; /* 减少任务数列的比例 */
+            min-width: 50px;
+          }
+
+          &:nth-child(5) { /* 状态列 */
+            text-align: center;
+            flex: 0.6; /* 减少状态列的比例 */
+            min-width: 50px;
+          }
         }
       }
     }
@@ -89,27 +132,60 @@
     display: flex;
     align-items: center;
     font-weight: bold;
+    width: 100%;
+    /* 防止横向溢出 */
+    overflow: hidden;
 
     span {
-      font-size: 14px;
+      font-size: 13px;
-      line-height: 22px;
+      line-height: 20px;
       text-align: center;
-      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0 6px;
+      box-sizing: border-box;
 
       &:first-child {
-        background-color: transparent; /* 去除背景色 */
+        background-color: transparent;
         color: rgba(0, 0, 0, 0.8);
-        border-radius: 0; /* 去除圆角 */
+        border-radius: 0;
         display: inline-block;
-        font-size: 14px;
+        font-size: 13px;
         font-weight: bold;
-        margin-right: 24px;
+        margin-right: 8px; /* 与数据行序号列保持一致 */
         height: 20px;
         line-height: 20px;
         width: 20px;
         text-align: center;
-        flex: none;
+        padding: 0;
-        white-space: nowrap;
+        flex: 0 0 20px !important; /* 使用important确保固定宽度 */
+        min-width: 35px !important; /* 使用important确保最小宽度 */
+      }
+
+      /* 表头列宽与数据行保持一致 */
+      &:nth-child(2) { /* 工作站列 */
+        text-align: left;
+        flex: 1.5;
+        min-width: 130px;
+      }
+
+      &:nth-child(3) { /* 任务列 */
+        text-align: left;
+        flex: 0.9;
+        min-width: 90px;
+      }
+
+      &:nth-child(4) { /* 任务数列 */
+        text-align: center;
+        flex: 0.6;
+        min-width: 50px;
+      }
+
+      &:nth-child(5) { /* 状态列 */
+        text-align: center;
+        flex: 0.6;
+        min-width: 50px;
       }
     }
   }
@@ -117,5 +193,7 @@
   .title {
     font-size: 16px;
     color: #0a8fe9;
+    white-space: nowrap;
+    padding: 0 8px; /* 标题也添加内边距，确保对齐 */
   }
 </style>

src/views/dashboard/Analysis/api.ts

@@ -5,7 +5,7 @@ enum Api {
   visitInfo = '/sys/visitInfo',
   getChartCardList = '/dashboard/getChartCardList',
   queryOutAndInData = '/dashboard/queryOutAndInData',
-  queryExecuteTopFive = '/dashboard/queryExecuteTopFive',
+  queryWorkstationTask = '/dashboard/queryWorkstationTask',
 }
 /**
  * 日志统计信息
@@ -22,4 +22,4 @@ export const getChartCardList = (params) => defHttp.get({ url: Api.getChartCardL
 
 export const queryOutAndInData = (params) => defHttp.get({ url: Api.queryOutAndInData, params }, { isTransformResponse: false });
 
-export const queryExecuteTopFive = (params) => defHttp.get({ url: Api.queryExecuteTopFive, params }, { isTransformResponse: false });
+export const queryWorkstationTask = (params) => defHttp.get({ url: Api.queryWorkstationTask, params }, { isTransformResponse: false });

src/views/dashboard/Analysis/components/SaleTabCard.vue

@@ -46,7 +46,7 @@
   import { ref, onMounted } from 'vue';
   import RankList from '/@/components/chart/RankList.vue';
   import BarMulti from '@/components/chart/BarMulti.vue';
-  import { queryOutAndInData, queryExecuteTopFive } from '@/views/dashboard/Analysis/api';
+  import { queryOutAndInData, queryWorkstationTask } from '@/views/dashboard/Analysis/api';
 
   defineProps({
     loading: {
@@ -74,11 +74,12 @@
 
   async function queryRankList() {
     try {
-      const response = await queryExecuteTopFive({});
+      const response = await queryWorkstationTask({});
       rankList.value = response.result.map((item) => ({
-        stockName: item.carrierCode,
+        workstation: item.workstation,
-        itemCode: item.itemCode,
+        taskName: item.taskName,
-        type: item.type==='OUTBOUND'?'出库':'入库',
+        taskCount: item.taskCount,
+        taskStatus: item.taskStatus
       }));
     } catch (error) {
       console.error('获取数据失败:', error);