diff --git a/src/api/inout/splitInv.js b/src/api/inout/splitInv.js
index e35f47d6..c72de19f 100644
--- a/src/api/inout/splitInv.js
+++ b/src/api/inout/splitInv.js
@@ -37,3 +37,12 @@ export function exportExcel(query) {
     params: query
   });
 }
+
+
+export function getStockList(query) {
+  return axios({
+    url: "/udiwms/ioSplit/inv/getCount",
+    method: "get",
+    params: query
+  });
+}
diff --git a/src/views/collect/CollectOrderTabs.vue b/src/views/collect/CollectOrderTabs.vue
index e55e2d6f..8131b662 100644
--- a/src/views/collect/CollectOrderTabs.vue
+++ b/src/views/collect/CollectOrderTabs.vue
@@ -114,6 +114,11 @@
 
               <span slot="title">工位库存</span>
             </el-menu-item>
+
+            <el-menu-item :index=17 @click="clickMenuItem(17)" v-if="workPlaceClass == 2">
+
+              <span slot="title">库存预览</span>
+            </el-menu-item>
             <el-menu-item :index=7 @click="clickMenuItem(7)" v-if="workPlaceClass == 2">
 
               <span slot="title">拆零管理</span>
@@ -337,6 +342,8 @@ import IocCollectOrderVerify from '@/views/collect/IocCollectOrderVerify.vue'
 import IoSplitFifoRemove from '@/views/collect/IoSplitFifoRemove.vue'
 import IoSplitCreateOrder from '@/views/collect/IoCreateOrder.vue'
 import IoFullCreateOrder from '@/views/collect/IoCreateOrder.vue'
+import IosplitFifoStock from '@/views/collect/IosplitFifoStock.vue'
+
 
 // 导入器械相关工位上货页面
 import DevicesIoCreateOrderOut from '@/views/collect/device/DevicesIoCreateOrder.vue'
@@ -377,6 +384,7 @@ export default {
     IocCollectOrderVerify,
     IoSplitFifoRemove,
     IoSplitCreateOrder,
+    IosplitFifoStock,
 
     //器械页面
     DevicesDealOrder,
@@ -584,6 +592,15 @@ export default {
             fifoSplitTag: 2
           }
         },
+        {
+          number: 17,
+          title: '库存预览',
+          name: 'IosplitFifoStock',
+          component: IosplitFifoStock,
+          // 假设你需要传递的参数
+          componentProps: {
+          }
+        },
 
         //器械页面
         {
diff --git a/src/views/collect/IoSplitFiFoProgress.vue b/src/views/collect/IoSplitFiFoProgress.vue
index 793c040c..60ee329e 100644
--- a/src/views/collect/IoSplitFiFoProgress.vue
+++ b/src/views/collect/IoSplitFiFoProgress.vue
@@ -50,7 +50,7 @@
                     :text-inside="true"
                     :percentage="calculatePercentage(item.splitStock, item.splitTotal)"
                     :color="getProgressColor(item.splitStock, item.splitTotal)"
-                    :stroke-width="12"
+                    :stroke-width="20"
                   ></el-progress>
                 </div>
               </div>
@@ -78,10 +78,10 @@
 </template>
 
 <script>
-import { splitFifoPage } from "@/api/inout/splitInv";
+import { getStockList } from '@/api/inout/splitInv'
 
 export default {
-  name: "ProductStockDashboard",
+  name: "IoSplitFiFoProgress",
   data() {
     return {
       searchQuery: "",
@@ -122,7 +122,7 @@ export default {
       };
 
       // 调用API获取数据
-      splitFifoPage(params)
+      getStockList(params)
         .then(response => {
           if (response.code === 20000) {
             // 处理返回的数据
@@ -134,9 +134,9 @@ export default {
                 productName: item.cpmctymc || '未知产品',
                 batchNo: item.batchNo || '无批次',
                 expireDate: item.expireDate || '无效期',
-                workplaceStock: item.workplaceQty || 0,
+                workplaceStock: item.remCount || 29,
                 workplaceTotal: item.workplaceTotal || 100,
-                splitStock: item.splitQty || 0,
+                splitStock: item.splitQty || 62,
                 splitTotal: item.splitTotal || 100
               };
             });
@@ -157,7 +157,9 @@ export default {
     },
     calculatePercentage(current, total) {
       if (!total || total === 0) return 0;
-      const percentage = (current / total) * 100;
+      // const percentage = (current / total) * 100;
+      // return Math.min(100, Math.max(0, percentage));
+      const percentage = Math.round((current * 100) / total);
       return Math.min(100, Math.max(0, percentage));
     },
     getProgressColor(current, total) {
@@ -175,19 +177,22 @@ export default {
       return this.colorRanges[0].color;
     }
   },
-  mounted() {
+  // mounted() {
+  //   this.fetchData();
+  //
+  //   // 如果需要自动刷新数据，可以添加定时器
+  //   this.refreshTimer = setInterval(() => {
+  //     this.fetchData();
+  //   }, 60000); // 每分钟刷新一次
+  // },
+  created() {
     this.fetchData();
-
-    // 如果需要自动刷新数据，可以添加定时器
-    this.refreshTimer = setInterval(() => {
-      this.fetchData();
-    }, 60000); // 每分钟刷新一次
   },
   beforeDestroy() {
     // 清除定时器
-    if (this.refreshTimer) {
-      clearInterval(this.refreshTimer);
-    }
+    // if (this.refreshTimer) {
+    //   clearInterval(this.refreshTimer);
+    // }
   }
 };
 </script>
@@ -327,7 +332,7 @@ export default {
 /* 大屏模式下的额外样式 */
 @media screen and (min-width: 1920px) {
   .dashboard-container {
-    padding: 30px;
+    padding: 10px;
   }
 
   .product-card {
diff --git a/src/views/collect/IosplitFifoStock.vue b/src/views/collect/IosplitFifoStock.vue
new file mode 100644
index 00000000..178934e1
--- /dev/null
+++ b/src/views/collect/IosplitFifoStock.vue
@@ -0,0 +1,344 @@
+<template>
+  <div class="dashboard-container">
+    <!-- 搜索区域 -->
+    <div class="search-section">
+      <div class="search-wrapper">
+        <el-input
+          placeholder="请输入产品名称搜索"
+          prefix-icon="el-icon-search"
+          v-model="filterQuery.cpmctymc"
+          @keyup.enter.native="handleSearch"
+          clearable
+        >
+          <el-button slot="append" icon="el-icon-refresh" @click="onReset">重置</el-button>
+          <el-button slot="append" icon="el-icon-search" @click="handleSearch" >查询</el-button>
+        </el-input>
+      </div>
+    </div>
+
+    <!-- 展示区域 -->
+    <div class="display-section">
+      <div class="card-container">
+        <el-row :gutter="20">
+          <el-col :span="8" v-for="(item, index) in displayData" :key="index">
+            <el-card class="product-card" :body-style="{ padding: '0px' }">
+              <div class="card-header">
+                <h3 class="product-name" :title="item.productName">{{ item.productName }}</h3>
+                <div class="product-info">
+                  <span class="batch-no">{{ item.batchNo }}</span>
+                  <span class="expire-date">{{ item.expireDate }}</span>
+                </div>
+              </div>
+              <div class="card-body">
+                <div class="progress-item">
+                  <div class="progress-label">
+                    <span>工位存量</span>
+                    <span class="progress-value">{{ item.workplaceStock }}/{{ item.workplaceTotal }}</span>
+                  </div>
+                  <el-progress
+                    :text-inside="true"
+                    :percentage="calculatePercentage(item.workplaceStock, item.workplaceTotal)"
+                    :color="getProgressColor(item.workplaceStock, item.workplaceTotal)"
+                    :stroke-width="20"
+                  ></el-progress>
+                </div>
+                <div class="progress-item">
+                  <div class="progress-label">
+                    <span>拆零存量</span>
+                    <span class="progress-value">{{ item.splitStock }}/{{ item.splitTotal }}</span>
+                  </div>
+                  <el-progress
+                    :text-inside="true"
+                    :percentage="calculatePercentage(item.splitStock, item.splitTotal)"
+                    :color="getProgressColor(item.splitStock, item.splitTotal)"
+                    :stroke-width="20"
+                  ></el-progress>
+                </div>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination-container">
+          <el-pagination
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="filterQuery.page"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="filterQuery.limit"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+    </div>
+   </div>
+  </div>
+</template>
+
+<script>
+import { getStockList } from '@/api/inout/splitInv'
+
+export default {
+  name: "IosplitFifoStock",
+  data() {
+    return {
+      filterQuery: {
+        page: 1,
+        limit: 10,
+        cpmctymc:""
+      },
+      total: 0,
+      displayData: [],
+      loading: false,
+      colorRanges: [
+        { min: 0, max: 20, color: '#F56C6C' },   // 红色 - 危险
+        { min: 20, max: 50, color: '#E6A23C' },  // 橙色 - 警告
+        { min: 50, max: 80, color: '#409EFF' },  // 蓝色 - 正常
+        { min: 80, max: 101, color: '#67C23A' }  // 绿色 - 良好
+      ]
+    }
+  },
+  methods: {
+    onReset() {
+      this.filterQuery = {
+        page: 1,
+        limit: 10,
+        cpmctymc:""
+      }
+      this.getList();
+    },
+    handleSearch() {
+      this.filterQuery.page = 1;
+      this.getList();
+    },
+    handleSizeChange(val) {
+      this.filterQuery.limit = val;
+      this.getList();
+    },
+    handleCurrentChange(val) {
+      this.filterQuery.page = val;
+      this.getList();
+    },
+    getList() {
+      this.loading = true;
+      // 调用API获取数据
+      getStockList(this.filterQuery)
+        .then(response => {
+          if (response.code === 20000) {
+            // 处理返回的数据
+            this.total = response.data.total || 0;
+            console.log("jkjsjsjs",this.total)
+            // 转换数据格式以适应展示需求
+            this.displayData = (response.data.list || []).map(item => {
+              return {
+                productName: item.cpmctymc || '未知产品',
+                batchNo: item.batchNo || '无批次',
+                expireDate: item.expireDate || '无效期',
+                workplaceStock: item.remCount || 0,
+                workplaceTotal: item.workplaceTotal || 100,
+                splitStock: item.splitRemCount || 0,
+                splitTotal: item.splitTotal || 100
+              };
+            });
+          } else {
+            this.$message.error(response.message || '获取数据失败');
+            this.displayData = [];
+            this.total = 0;
+          }
+          this.loading = false;
+        })
+        .catch(error => {
+          console.error('获取数据失败:', error);
+          this.$message.error('获取数据失败，请稍后重试');
+          this.displayData = [];
+          this.total = 0;
+          this.loading = false;
+        });
+    },
+    calculatePercentage(current, total) {
+      if (!total || total === 0) return 0;
+      // const percentage = (current / total) * 100;
+      // return Math.min(100, Math.max(0, percentage));
+      const percentage = Math.round((current * 100) / total);
+      return Math.min(100, Math.max(0, percentage));
+    },
+    getProgressColor(current, total) {
+      if (!total || total === 0) return this.colorRanges[0].color;
+
+      const percentage = this.calculatePercentage(current, total);
+
+      // 根据百分比返回对应的颜色
+      for (const range of this.colorRanges) {
+        if (percentage >= range.min && percentage < range.max) {
+          return range.color;
+        }
+      }
+
+      return this.colorRanges[0].color;
+    }
+  },
+  created() {
+    this.getList()
+  },
+};
+</script>
+
+<style scoped>
+.dashboard-container {
+  height: 100vh; /* 使用视口高度单位，确保铺满整个屏幕 */
+  width: 100%;
+  background-color: #f5f7fa;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box; /* 确保padding不会增加总高度 */
+  overflow: hidden; /* 防止内容溢出 */
+}
+
+.search-section {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.search-wrapper {
+  max-width: 600px;
+
+  margin: 0 0; /* 修改为左对齐 */
+}
+
+.display-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; /* 防止内容溢出 */
+}
+
+.card-container {
+  flex: 1;
+  overflow-y: auto;
+  padding-bottom: 20px; /* 为分页腾出空间 */
+}
+
+.product-card {
+  height: 220px; /* 增加卡片高度 */
+  margin-bottom: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.product-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+.card-header {
+  background-color: #409EFF;
+  color: white;
+  padding: 15px;
+}
+
+.product-name {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.product-info {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 5px;
+  font-size: 12px;
+  opacity: 0.9;
+}
+
+.card-body {
+  padding: 20px; /* 增加内边距 */
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around; /* 均匀分布进度条 */
+}
+
+.progress-item {
+  margin-bottom: 20px; /* 增加进度条之间的间距 */
+}
+
+.progress-item:last-child {
+  margin-bottom: 0;
+}
+
+.progress-label {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px; /* 增加标签和进度条之间的间距 */
+  font-size: 14px;
+  color: #606266;
+}
+
+.progress-value {
+  font-weight: 600;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: center;
+  padding: 10px 0;
+}
+
+/* 响应式调整 */
+@media screen and (max-width: 1200px) {
+  .el-col {
+    width: 100% !important;
+  }
+
+  .product-card {
+    height: 200px; /* 在小屏幕上稍微减小高度 */
+  }
+}
+
+/* 自定义进度条样式 */
+:deep(.el-progress-bar__outer) {
+  border-radius: 6px;
+  background-color: #ebeef5;
+  height: 12px !important; /* 确保进度条高度 */
+}
+
+:deep(.el-progress-bar__inner) {
+  border-radius: 6px;
+  transition: width 0.6s ease, background-color 0.6s ease;
+}
+
+/* 大屏模式下的额外样式 */
+@media screen and (min-width: 1920px) {
+  .dashboard-container {
+    padding: 10px;
+  }
+
+  .product-card {
+    height: 240px; /* 在大屏幕上增加高度 */
+  }
+
+  .product-name {
+    font-size: 22px;
+  }
+
+  .progress-label {
+    font-size: 16px;
+  }
+
+  .progress-item {
+    margin-bottom: 25px;
+  }
+}
+</style>
+