no message

src/components/chart/RankList.vue

@@ -1,11 +1,22 @@
 <template>
   <div class="rank">
     <h4 class="title">{{ title }}</h4>
+    <div class="header">
+      <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">
+
-        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
+      <li :key="index" v-for="(item, index) in list" v-if="list.length>0">
-        <span>{{ item.name }}</span>
+        <span :class="'active'">{{ index + 1 }}</span>
-        <span>{{ item.total }}</span>
+        <span>{{ item.stockName }}</span>
+        <span>{{ item.itemCode }}</span>
+        <span>{{ item.type }}</span>
+      </li>
+      <li v-else>
+        <a-empty style="margin-left: 50px"/>
       </li>
     </ul>
   </div>
@@ -37,16 +48,18 @@
     padding: 0 32px 32px 72px;
 
     .list {
-      margin: 25px 0 0;
-      padding: 0;
       list-style: none;
 
       li {
         margin-top: 16px;
+        display: flex; /* 使用 flex 布局更方便控制对齐 */
+        align-items: center; /* 垂直居中 */
 
         span {
           font-size: 14px;
           line-height: 22px;
+          text-align: center; /* 所有列都居中对齐 */
+          flex: 1; /* 平均分配宽度 */
 
           &:first-child {
             background-color: #f5f5f5;
@@ -60,20 +73,49 @@
             line-height: 20px;
             width: 20px;
             text-align: center;
+            flex: none; /* 关键：不参与 flex 布局伸缩 */
           }
           &.active {
             background-color: #314659;
             color: #fff;
           }
-          &:last-child {
-            float: right;
-          }
         }
       }
     }
   }
 
-  .mobile .rank {
+  .header {
-    padding: 0 32px 32px 32px;
+    margin-top: 16px;
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+
+    span {
+      font-size: 14px;
+      line-height: 22px;
+      text-align: center;
+      flex: 1;
+
+      &:first-child {
+        background-color: transparent; /* 去除背景色 */
+        color: rgba(0, 0, 0, 0.8);
+        border-radius: 0; /* 去除圆角 */
+        display: inline-block;
+        font-size: 14px;
+        font-weight: bold;
+        margin-right: 24px;
+        height: 20px;
+        line-height: 20px;
+        width: 20px;
+        text-align: center;
+        flex: none;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .title{
+    font-size: 16px;
+    color: #0a8fe9;
   }
 </style>

src/views/dashboard/Analysis/api.ts

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

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

@@ -3,15 +3,15 @@
     <div class="salesCard">
       <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
         <template #rightExtra>
-<!--          <div class="extra-wrapper">
+          <!--          <div class="extra-wrapper">
-            <div class="extra-item">
+                      <div class="extra-item">
-                            <a>今日</a>
+                                      <a>今日</a>
-                            <a>本周</a>
+                                      <a>本周</a>
-                            <a>本月</a>
+                                      <a>本月</a>
-                            <a>本年</a>
+                                      <a>本年</a>
-            </div>
+                      </div>
-            <a-range-picker :style="{ width: '256px' }" />
+                      <a-range-picker :style="{ width: '256px' }" />
-          </div>-->
+                    </div>-->
         </template>
         <a-tab-pane loading="true" tab="本周出入库数据" key="1">
           <a-row>
@@ -24,7 +24,7 @@
               />
             </a-col>
             <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
-              <RankList title="门店销售排行榜" :list="rankList" />
+              <RankList title="任务看板" :list="rankList" />
             </a-col>
           </a-row>
         </a-tab-pane>
@@ -46,20 +46,21 @@
   import { ref, onMounted } from 'vue';
   import RankList from '/@/components/chart/RankList.vue';
   import BarMulti from '@/components/chart/BarMulti.vue';
-  import { queryOutAndInData } from '@/views/dashboard/Analysis/api';
+  import { queryOutAndInData, queryExecuteTopFive } from '@/views/dashboard/Analysis/api';
 
   defineProps({
     loading: {
       type: Boolean,
     },
   });
-  const rankList = [];
+
-  for (let i = 0; i < 7; i++) {
+  /*  const rankList = [
-    rankList.push({
+      /!*{stockName: 'P001494', itemCode: 'A01', type:'入库' },
-      name: '白鹭岛 ' + (i + 1) + ' 号店',
+      {stockName: 'P001496', itemCode: 'A02', type:'入库' },
-      total: 1234.56 - i * 100,
+      {stockName: 'P001495', itemCode: 'A03', type:'出库' },
-    });
+      {stockName: 'P001495', itemCode: 'A03', type:'出库' },
-  }
+      {stockName: 'P001495', itemCode: 'A03', type:'出库' },*!/
+    ];*/
 
   /*const barData = [
 { name: '2026-01-19', type: '入库', value: 392 },
@@ -68,6 +69,22 @@
 { name: '2026-01-20', type: '出库', value: 123 },
 ];*/
 
+  // 动态获取的 rankList
+  const rankList = ref([]);
+
+  async function queryRankList() {
+    try {
+      const response = await queryExecuteTopFive({});
+      rankList.value = response.result.map((item) => ({
+        stockName: item.carrierCode,
+        itemCode: item.itemCode,
+        type: item.type==='OUTBOUND'?'出库':'入库',
+      }));
+    } catch (error) {
+      console.error('获取数据失败:', error);
+    }
+  }
+
   const seriesColor = [
     { type: '入库', color: '#5470c6' },
     { type: '出库', color: '#91cc75' },
@@ -75,13 +92,14 @@
 
   // 动态获取的 barData
   const barData = ref([]);
+
   async function queryData() {
     try {
       const response = await queryOutAndInData({});
-      barData.value= response.result.map(item => ({
+      barData.value = response.result.map((item) => ({
         name: item.createTime,
         type: item.type,
-        value: item.qty
+        value: item.qty,
       }));
     } catch (error) {
       console.error('获取数据失败:', error);
@@ -90,6 +108,7 @@
 
   onMounted(() => {
     queryData();
+    queryRankList();
   });
 </script>