diff --git a/src/api/home/index.ts b/src/api/home/index.ts
new file mode 100644
index 000000000..aa8cb1388
--- /dev/null
+++ b/src/api/home/index.ts
@@ -0,0 +1,22 @@
+import request from '@/config/axios'
+
+// 供应商首页
+export const getSupplierData = async () => {
+  return await request.get({ url: `/wms/index/indexSupplier` })
+}
+
+// 原料管理员首页
+export const getMaterialData = async () => {
+  return await request.get({ url: `/wms/index/indexMaterial` })
+}
+
+// 生产管理员首页
+export const getProduceData = async () => {
+  return await request.get({ url: `/wms/index/indexProduce` })
+}
+
+// 成品管理员首页
+export const getProductData = async () => {
+  return await request.get({ url: `/wms/index/indexProduct` })
+}
+
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index 8c6be92e4..1cc81ac3a 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
     <supplierIndex v-hasRole="['super_admin','supplier']"/>
-    <warehouseKeeper v-hasRole="['super_admin']"/>
-    <productWarehouseKeeper v-hasRole="['super_admin']"/>
-    <productionManager v-hasRole="['super_admin']"/>
+    <material v-hasRole="['super_admin']"/>
+    <product v-hasRole="['super_admin']"/>
+    <produce v-hasRole="['super_admin']"/>
   </div>
 </template>
 <script lang="ts" setup>
   import supplierIndex from './components/supplierIndex.vue'
-  import warehouseKeeper from './components/warehouseKeeper.vue'
-  import productWarehouseKeeper from './components/productWarehouseKeeper.vue'
-  import productionManager from './components/productionManager.vue'
+  import material from './components/material.vue'
+  import product from './components/product.vue'
+  import produce from './components/produce.vue'
 </script>
diff --git a/src/views/Home/components/material.vue b/src/views/Home/components/material.vue
new file mode 100644
index 000000000..fd8d5a2bf
--- /dev/null
+++ b/src/views/Home/components/material.vue
@@ -0,0 +1,306 @@
+<!-- 原料管理员首页 -->
+<template>
+  <div class="row">
+    <div class="data">
+      <div class="small-data-item small-data-item1">
+        <div class="small-data-item-txt">
+          <div>今日到货计划(已发货)</div>
+          <div>{{materialData?.preparetoissueTodayCount}}<span>单</span></div>
+        </div>
+        <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
+      </div>
+      <div class="small-data-item small-data-item2 ml-14px">
+        <div class="small-data-item-txt">
+          <div>今日备料计划(已发料)</div>
+          <div>{{materialData?.preparetoissueTodayCount}}<span>单</span></div>
+        </div>
+        <img src="../../../assets/imgs/icon5.png" alt="" class="img" />
+      </div>
+      <div class="small-data-item small-data-item3 ml-14px">
+        <div class="small-data-item-txt">
+          <div>今日叫料请求(已发料)</div>
+          <div>{{materialData?.issueRequestTodayCount}}<span>单</span></div>
+        </div>
+        <img src="../../../assets/imgs/icon6.png" alt="" class="img" />
+      </div>
+      <div class="small-data-item small-data-item4 ml-14px">
+        <div class="small-data-item-txt">
+          <div>空闲库位数/总库位数</div>
+          <div style="font-size: 20px;">{{materialData?.freeLocationCount}}<span>个</span>/{{materialData?.totalLocationCount}}<span>个</span></div>
+        </div>
+        <img src="../../../assets/imgs/icon3.png" alt="" class="img" />
+      </div>
+    </div>
+    <div class="two-row mt-14px">
+      <div class="data1 w-[47.3%]">
+        <div class="title">呆滞库存预警</div>
+        <el-table
+          :data="materialData?.stagnantBalanceList"
+          style="width: 100%"
+          stripe
+          height="240px"
+        >
+          <el-table-column prop="itemCode" label="物料代码" width="180px" />
+          <el-table-column prop="batch" label="批次" width="180px" />
+          <el-table-column prop="packingNumber" label="包装号" width="180px" />
+          <el-table-column prop="containerNumber" label="器具代码" width="180px" />
+          <el-table-column prop="qty" label="数量" width="180px" />
+          <el-table-column prop="uom" label="计量单位" width="180px">
+            <template #default="scope">
+              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="locationCode" label="库位代码" width="180px" />
+          <el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
+          <el-table-column prop="inventoryStatus" label="库存状态" width="180px">
+            <template #default="scope">
+              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
+          <el-table-column prop="areaCode" label="库区代码" width="180px" />
+          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
+          <el-table-column prop="altBatch" label="替代批次" width="180px" />
+          <el-table-column prop="arriveDate" label="到货日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="produceDate" label="生产日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="expireDate" label="失效日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="ownerCode" label="货主代码" width="180px" />
+          <el-table-column prop="lockedQty" label="锁定数量" width="180px" />
+          <el-table-column prop="usableQty" label="可用数量" width="180px" />
+          <el-table-column prop="singlePrice" label="单价" width="180px" />
+          <el-table-column prop="amount" label="金额" width="180px" />
+          <el-table-column prop="putInTime" label="入库时间" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="data1 w-[47.3%]">
+        <div class="title">超期库存预警</div>
+        <el-table
+          :data="materialData?.overdueBalanceList"
+          style="width: 100%"
+          stripe
+          height="240px"
+        >
+          <el-table-column prop="itemCode" label="物料代码" width="180px" />
+          <el-table-column prop="batch" label="批次" width="180px" />
+          <el-table-column prop="packingNumber" label="包装号" width="180px" />
+          <el-table-column prop="containerNumber" label="器具代码" width="180px" />
+          <el-table-column prop="qty" label="数量" width="180px" />
+          <el-table-column prop="uom" label="计量单位" width="180px">
+            <template #default="scope">
+              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="locationCode" label="库位代码" width="180px" />
+          <el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
+          <el-table-column prop="inventoryStatus" label="库存状态" width="180px">
+            <template #default="scope">
+              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
+          <el-table-column prop="areaCode" label="库区代码" width="180px" />
+          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
+          <el-table-column prop="altBatch" label="替代批次" width="180px" />
+          <el-table-column prop="arriveDate" label="到货日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="produceDate" label="生产日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="expireDate" label="失效日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="ownerCode" label="货主代码" width="180px" />
+          <el-table-column prop="lockedQty" label="锁定数量" width="180px" />
+          <el-table-column prop="usableQty" label="可用数量" width="180px" />
+          <el-table-column prop="singlePrice" label="单价" width="180px" />
+          <el-table-column prop="amount" label="金额" width="180px" />
+          <el-table-column prop="putInTime" label="入库时间" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="two-row mt-14px">
+      <div class="data1 w-[47.3%]">
+        <div class="title">高低储预警</div>
+        <el-table :data="tableData" style="width: 100%" stripe height="240px">
+          <el-table-column prop="title" label="标题" />
+          <el-table-column prop="name" label="发布人" />
+          <el-table-column prop="date" label="发布日期" />
+        </el-table>
+      </div>
+      <div class="data1  w-[47.3%]">
+        <div class="title">待处理任务</div>
+        <el-table :data="tableData" style="width: 100%" stripe height="240px">
+          <el-table-column prop="title" label="标题" />
+          <el-table-column prop="name" label="发布人" />
+          <el-table-column prop="date" label="发布日期" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import * as IndexApi from '@/api/home'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    title: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  }
+]
+const materialData = ref()
+// 获取原料管理员数据
+const getMaterialData = async () => {
+  IndexApi.getMaterialData().then((res) => {
+    materialData.value = res
+  })
+}
+const formatter = (type, dict) => {
+  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0].label
+  return str
+}
+onMounted(async () => {
+  await getMaterialData()
+})
+</script>
+<style scoped lang="scss">
+.title {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #dedede;
+  position: relative;
+  padding-left: 10px;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 16px;
+    background: #3c7adf;
+    left: 0px;
+    top: 3px;
+    border-radius: 8px;
+  }
+}
+.data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .small-data-item {
+    width:25%;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    color: white;
+    padding: 0px 20px;
+    .small-data-item-txt {
+      flex: 1;
+      div {
+        &:nth-child(1) {
+          font-size: 14px;
+         
+        }
+        &:nth-child(2) {
+          font-size: 26px;
+          margin-top: 4px;
+          font-weight: bold;
+          span {
+            font-size: 14px;
+            padding-left: 6px;
+          font-weight: normal;
+          }
+        }
+      }
+    }
+    .img {
+      width: 40px;
+      opacity: 0.5;
+    }
+  }
+  .small-data-item1 {
+    background: linear-gradient(to left, #fd817d, #fcad80);
+  }
+  .small-data-item2 {
+    background: linear-gradient(to left, #46c6fa, #336bfe);
+  }
+  .small-data-item3 {
+    background: linear-gradient(to left, #96a6cc, #595f82);
+  }
+  .small-data-item4 {
+    background: linear-gradient(to left, #08dcd5, #46e2bb);
+  }
+  .small-data-item5 {
+    background: linear-gradient(to left, #f4c46b, #ffb313);
+  }
+  .small-data-item6 {
+    background: linear-gradient(to left, #6eccf8, #02acfd);
+  }
+}
+.two-row {
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  .data1 {
+    background: white;
+    padding: 14px;
+  }
+}
+</style>
diff --git a/src/views/Home/components/produce.vue b/src/views/Home/components/produce.vue
new file mode 100644
index 000000000..8046930a2
--- /dev/null
+++ b/src/views/Home/components/produce.vue
@@ -0,0 +1,305 @@
+<!-- 生产管理员首页 -->
+<template>
+  <div class="row">
+    <div class="two-row">
+      <div class="data1 w-[47.3%]">
+        <div class="title">今日生产计划</div>
+        <el-table
+          :data="produceData?.productionTodayList"
+          style="width: 100%"
+          stripe
+          height="240px"
+        >
+          <el-table-column prop="number" label="单据号" width="180" />
+          <el-table-column prop="displayOrder" label="顺序" width="170" />
+          <el-table-column prop="workshop" label="车间" width="170" />
+          <el-table-column prop="productionLine" label="生产线" width="170" />
+          <el-table-column prop="shift" label="班次" width="170" />
+          <el-table-column prop="team" label="班组" width="170" />
+          <el-table-column prop="planDate" label="计划日期" width="170"
+            ><template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="beginTime" label="开始日期" width="170"
+            ><template #default="scope">
+              <span>{{ formatDate(scope.row.beginTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="endTime" label="结束日期" width="170"
+            ><template #default="scope">
+              <span>{{ formatDate(scope.row.endTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="businessType" label="业务类型" />
+        </el-table>
+      </div>
+      <div class="data1 w-[47.3%]">
+        <div class="title">线边安全库存</div>
+        <el-table :data="produceData?.safeLocationList" style="width: 100%" stripe height="240px">
+          <el-table-column prop="code" label="代码" width="180" />
+          <el-table-column prop="name" label="名称" width="180" />
+          <el-table-column prop="warehouseCode" label="仓库代码" width="180" />
+          <el-table-column prop="areaCode" label="库区代码" width="180" />
+          <el-table-column prop="locationGroupCode" label="库位组代码" width="180" />
+          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180" />
+          <el-table-column prop="type" label="类型" width="180" />
+          <el-table-column prop="aisle" label="巷道" width="180" />
+          <el-table-column prop="shelf" label="货架" width="180" />
+          <el-table-column prop="locationRow" label="行" width="180" />
+          <el-table-column prop="locationColum" label="列" width="180" />
+          <el-table-column prop="pickPriority" label="拣料优先级" width="180" />
+          <el-table-column prop="maxWeight" label="最大承重" width="180" />
+          <el-table-column prop="maxArea" label="最大面积" width="180" />
+          <el-table-column prop="maxVolume" label="最大体积" width="180" />
+          <el-table-column prop="userGroupCode" label="用户组代码" width="180" />
+          <el-table-column prop="activeTime" label="生效时间" width="170">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="expireTime" label="失效时间" width="170">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="two-row mt-14px">
+      <div class="data1 w-[47.3%]">
+        <div class="title">待上架成品库存</div>
+        <el-table
+          :data="produceData?.productputawayJobDetailList"
+          style="width: 100%"
+          stripe
+          height="240px"
+        >
+          <el-table-column prop="number" label="单据号" width="180" />
+          <el-table-column prop="fromWarehouseCode" label="从仓库代码" width="180" />
+          <el-table-column prop="requestTime" label="申请时间" width="170">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.requestTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="requestDueTime" label="要求截止时间" width="170">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.requestDueTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="状态"  width="140"/>
+          <el-table-column prop="departmentCode" label="部门" />
+          <el-table-column prop="acceptUserId" label="承接人用户名" width="170" />
+          <el-table-column prop="acceptTime" label="承接时间" width="170">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.acceptTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="fromLocationTypes" label="从库位类型范围"  width="170"/>
+          <el-table-column prop="toLocationTypes" label="到库位类型范围" width="170" />
+          <el-table-column prop="toWarehouseCode" label="到仓库代码"  width="170"/>
+          <el-table-column prop="fromAreaCodes" label="从库区代码范围"  width="170"/>
+          <el-table-column prop="toAreaCodes" label="到库区代码范围"  width="170"/>
+          <el-table-column prop="autoComplete" label="自动完成" width="120">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.autoComplete, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowModifyLocation" label="允许修改库位"  width="120">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.allowModifyLocation, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowModifyQty" label="允许修改数量" width="120">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.allowModifyQty, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowBiggerQty" label="允许大于推荐数量" width="140">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.allowBiggerQty, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowSmallerQty" label="允许小于推荐数量" width="140">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.allowSmallerQty, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowModifyInventoryStatus" label="允许修改库存状态" width="140">
+            <template #default="scope">
+              <span>{{
+                formatter(scope.row.allowModifyInventoryStatus, DICT_TYPE.TRUE_FALSE)
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowContinuousScanning" label="允许连续扫描" width="120">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.allowContinuousScanning, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowPartialComplete" label="允许部分完成" width="120">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.allowPartialComplete, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowModifyBatch" label="允许修改批次" width="120">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.allowModifyBatch, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="allowModifyPackingNumber" label="允许修改箱码" width="120">
+            <template #default="scope">
+              <span>{{ formatter(scope.row.allowModifyPackingNumber, DICT_TYPE.TRUE_FALSE) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="data1 w-[47.3%]">
+        <div class="title">待处理任务</div>
+        <el-table :data="tableData" style="width: 100%" stripe height="240px">
+          <el-table-column prop="title" label="标题" />
+          <el-table-column prop="name" label="发布人" />
+          <el-table-column prop="date" label="发布日期" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import * as IndexApi from '@/api/home'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    title: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  }
+]
+const produceData = ref()
+// 获取生产管理员首页数据
+const getProduceData = async () => {
+  IndexApi.getProduceData().then((res) => {
+    produceData.value = res
+  })
+}
+const formatter = (type, dict) => {
+  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0].label
+  return str
+}
+onMounted(async () => {
+  await getProduceData()
+})
+</script>
+<style scoped lang="scss">
+.title {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #dedede;
+  position: relative;
+  padding-left: 10px;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 16px;
+    background: #3c7adf;
+    left: 0px;
+    top: 3px;
+    border-radius: 8px;
+  }
+}
+.data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .small-data-item {
+    width: 25%;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    color: white;
+    padding: 0px 20px;
+    .small-data-item-txt {
+      flex: 1;
+      div {
+        &:nth-child(1) {
+          font-size: 14px;
+        }
+        &:nth-child(2) {
+          font-size: 26px;
+          margin-top: 4px;
+          font-weight: bold;
+          span {
+            font-size: 14px;
+            padding-left: 6px;
+            font-weight: normal;
+          }
+        }
+      }
+    }
+    .img {
+      width: 40px;
+      opacity: 0.5;
+    }
+  }
+  .small-data-item1 {
+    background: linear-gradient(to left, #fd817d, #fcad80);
+  }
+  .small-data-item2 {
+    background: linear-gradient(to left, #46c6fa, #336bfe);
+  }
+  .small-data-item3 {
+    background: linear-gradient(to left, #96a6cc, #595f82);
+  }
+  .small-data-item4 {
+    background: linear-gradient(to left, #08dcd5, #46e2bb);
+  }
+  .small-data-item5 {
+    background: linear-gradient(to left, #f4c46b, #ffb313);
+  }
+  .small-data-item6 {
+    background: linear-gradient(to left, #6eccf8, #02acfd);
+  }
+}
+.two-row {
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  .data1 {
+    background: white;
+    padding: 14px;
+  }
+}
+</style>
diff --git a/src/views/Home/components/product.vue b/src/views/Home/components/product.vue
new file mode 100644
index 000000000..560e3a990
--- /dev/null
+++ b/src/views/Home/components/product.vue
@@ -0,0 +1,284 @@
+<!-- 成品管理员首页 -->
+<template>
+  <div class="row">
+    <div class="data">
+      <div class="small-data-item small-data-item1">
+        <div class="small-data-item-txt">
+          <div>今日到货计划(已发货)</div>
+          <div>{{ productData?.deliverPlanTodayCount || 0 }}<span>单</span></div>
+        </div>
+        <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
+      </div>
+    </div>
+    <div class="two-row mt-14px">
+      <div class="data1 w-[47.3%]">
+        <div class="title">呆滞库存预警</div>
+        <el-table
+          :data="productData?.stagnantBalanceList"
+          style="width: 100%"
+          stripe
+          height="240px"
+        >
+          <el-table-column prop="itemCode" label="物料代码" width="180px" />
+          <el-table-column prop="batch" label="批次" width="180px" />
+          <el-table-column prop="packingNumber" label="包装号" width="180px" />
+          <el-table-column prop="containerNumber" label="器具代码" width="180px" />
+          <el-table-column prop="qty" label="数量" width="180px" />
+          <el-table-column prop="uom" label="计量单位" width="180px">
+            <template #default="scope">
+              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="locationCode" label="库位代码" width="180px" />
+          <el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
+          <el-table-column prop="inventoryStatus" label="库存状态" width="180px">
+            <template #default="scope">
+              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
+          <el-table-column prop="areaCode" label="库区代码" width="180px" />
+          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
+          <el-table-column prop="altBatch" label="替代批次" width="180px" />
+          <el-table-column prop="arriveDate" label="到货日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="produceDate" label="生产日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="expireDate" label="失效日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="ownerCode" label="货主代码" width="180px" />
+          <el-table-column prop="lockedQty" label="锁定数量" width="180px" />
+          <el-table-column prop="usableQty" label="可用数量" width="180px" />
+          <el-table-column prop="singlePrice" label="单价" width="180px" />
+          <el-table-column prop="amount" label="金额" width="180px" />
+          <el-table-column prop="putInTime" label="入库时间" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="data1 w-[47.3%]">
+        <div class="title">超期库存预警</div>
+        <el-table
+          :data="productData?.overdueBalanceList"
+          style="width: 100%"
+          stripe
+          height="240px"
+        >
+          <el-table-column prop="itemCode" label="物料代码" width="180px" />
+          <el-table-column prop="batch" label="批次" width="180px" />
+          <el-table-column prop="packingNumber" label="包装号" width="180px" />
+          <el-table-column prop="containerNumber" label="器具代码" width="180px" />
+          <el-table-column prop="qty" label="数量" width="180px" />
+          <el-table-column prop="uom" label="计量单位" width="180px">
+            <template #default="scope">
+              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="locationCode" label="库位代码" width="180px" />
+          <el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
+          <el-table-column prop="inventoryStatus" label="库存状态" width="180px">
+            <template #default="scope">
+              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
+          <el-table-column prop="areaCode" label="库区代码" width="180px" />
+          <el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
+          <el-table-column prop="altBatch" label="替代批次" width="180px" />
+          <el-table-column prop="arriveDate" label="到货日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="produceDate" label="生产日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="expireDate" label="失效日期" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="ownerCode" label="货主代码" width="180px" />
+          <el-table-column prop="lockedQty" label="锁定数量" width="180px" />
+          <el-table-column prop="usableQty" label="可用数量" width="180px" />
+          <el-table-column prop="singlePrice" label="单价" width="180px" />
+          <el-table-column prop="amount" label="金额" width="180px" />
+          <el-table-column prop="putInTime" label="入库时间" width="180px">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.planDate) }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="two-row mt-14px">
+      <div class="data1 w-[47.3%]">
+        <div class="title">高低储预警</div>
+        <el-table :data="tableData" style="width: 100%" stripe height="240px">
+          <el-table-column prop="title" label="标题" />
+          <el-table-column prop="name" label="发布人" />
+          <el-table-column prop="date" label="发布日期" />
+        </el-table>
+      </div>
+      <div class="data1 w-[47.3%]">
+        <div class="title">待处理任务</div>
+        <el-table :data="tableData" style="width: 100%" stripe height="240px">
+          <el-table-column prop="title" label="标题" />
+          <el-table-column prop="name" label="发布人" />
+          <el-table-column prop="date" label="发布日期" />
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import * as IndexApi from '@/api/home'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    title: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-02',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-04',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  },
+  {
+    date: '2016-05-01',
+    title: 'Tom',
+    name: 'Tom',
+    text: 'No. 189, Grove St, Los Angeles'
+  }
+]
+// 获取成品管理员首页首页数据
+const productData = ref()
+const getProductData = async () => {
+  IndexApi.getProductData().then((res) => {
+    productData.value = res
+  })
+}
+const formatter = (type, dict) => {
+  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0].label
+  return str
+}
+onMounted(async () => {
+  await getProductData()
+})
+</script>
+<style scoped lang="scss">
+.title {
+  padding-bottom: 10px;
+  border-bottom: 1px solid #dedede;
+  position: relative;
+  padding-left: 10px;
+  &::after {
+    content: '';
+    position: absolute;
+    width: 4px;
+    height: 16px;
+    background: #3c7adf;
+    left: 0px;
+    top: 3px;
+    border-radius: 8px;
+  }
+}
+.data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .small-data-item {
+    width: 25%;
+    height: 90px;
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    color: white;
+    padding: 0px 20px;
+    .small-data-item-txt {
+      flex: 1;
+      div {
+        &:nth-child(1) {
+          font-size: 14px;
+        }
+        &:nth-child(2) {
+          font-size: 26px;
+          margin-top: 4px;
+          font-weight: bold;
+          span {
+            font-size: 14px;
+            padding-left: 6px;
+            font-weight: normal;
+          }
+        }
+      }
+    }
+    .img {
+      width: 40px;
+      opacity: 0.5;
+    }
+  }
+  .small-data-item1 {
+    background: linear-gradient(to left, #fd817d, #fcad80);
+  }
+  .small-data-item2 {
+    background: linear-gradient(to left, #46c6fa, #336bfe);
+  }
+  .small-data-item3 {
+    background: linear-gradient(to left, #96a6cc, #595f82);
+  }
+  .small-data-item4 {
+    background: linear-gradient(to left, #08dcd5, #46e2bb);
+  }
+  .small-data-item5 {
+    background: linear-gradient(to left, #f4c46b, #ffb313);
+  }
+  .small-data-item6 {
+    background: linear-gradient(to left, #6eccf8, #02acfd);
+  }
+}
+.two-row {
+  display: flex;
+  align-content: center;
+  justify-content: space-between;
+  .data1 {
+    background: white;
+    padding: 14px;
+  }
+}
+</style>
diff --git a/src/views/Home/components/productWarehouseKeeper.vue b/src/views/Home/components/productWarehouseKeeper.vue
deleted file mode 100644
index 2b6938d2c..000000000
--- a/src/views/Home/components/productWarehouseKeeper.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-  <div class="row">
-    <div class="data">
-      <div class="small-data-item small-data-item1">
-        <div class="small-data-item-txt">
-          <div>今日到货计划(已发货)</div>
-          <div>22<span>单</span></div>
-        </div>
-        <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
-      </div>
-      
-    </div>
-    <div class="two-row mt-14px">
-      <div class="data1 w-[50%]">
-        <div class="title">呆滞库存预警</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-      <div class="data1 w-[50%] ml-14px">
-        <div class="title">超期库存预警</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-    </div>
-    <div class="two-row mt-14px">
-      <div class="data1 w-[50%]">
-        <div class="title">高低储预警</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-      <div class="data1 w-[50%] ml-14px">
-        <div class="title">待处理任务</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    title: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-02',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-04',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  }
-]
-
-</script>
-<style scoped lang="scss">
-.title {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #dedede;
-  position: relative;
-  padding-left: 10px;
-  &::after {
-    content: '';
-    position: absolute;
-    width: 4px;
-    height: 16px;
-    background: #3c7adf;
-    left: 0px;
-    top: 3px;
-    border-radius: 8px;
-  }
-}
-.data {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .small-data-item {
-    width:25%;
-    height: 90px;
-    display: flex;
-    align-items: center;
-    border-radius: 6px;
-    color: white;
-    padding: 0px 20px;
-    .small-data-item-txt {
-      flex: 1;
-      div {
-        &:nth-child(1) {
-          font-size: 14px;
-         
-        }
-        &:nth-child(2) {
-          font-size: 26px;
-          margin-top: 4px;
-          font-weight: bold;
-          span {
-            font-size: 14px;
-            padding-left: 6px;
-          font-weight: normal;
-          }
-        }
-      }
-    }
-    .img {
-      width: 40px;
-      opacity: 0.5;
-    }
-  }
-  .small-data-item1 {
-    background: linear-gradient(to left, #fd817d, #fcad80);
-  }
-  .small-data-item2 {
-    background: linear-gradient(to left, #46c6fa, #336bfe);
-  }
-  .small-data-item3 {
-    background: linear-gradient(to left, #96a6cc, #595f82);
-  }
-  .small-data-item4 {
-    background: linear-gradient(to left, #08dcd5, #46e2bb);
-  }
-  .small-data-item5 {
-    background: linear-gradient(to left, #f4c46b, #ffb313);
-  }
-  .small-data-item6 {
-    background: linear-gradient(to left, #6eccf8, #02acfd);
-  }
-}
-.two-row {
-  display: flex;
-  align-content: center;
-  .data1 {
-    background: white;
-    padding: 14px;
-  }
-}
-</style>
diff --git a/src/views/Home/components/productionManager.vue b/src/views/Home/components/productionManager.vue
deleted file mode 100644
index 13900e6a5..000000000
--- a/src/views/Home/components/productionManager.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <div class="row">
-    <div class="two-row">
-      <div class="data1 w-[50%]">
-        <div class="title">今日生产计划</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-      <div class="data1 w-[50%] ml-14px">
-        <div class="title">线边安全库存</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-    </div>
-    <div class="two-row mt-14px">
-      <div class="data1 w-[50%]">
-        <div class="title">待上架成品库存</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-      <div class="data1 w-[50%] ml-14px">
-        <div class="title">待处理任务</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    title: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-02',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-04',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  }
-]
-
-</script>
-<style scoped lang="scss">
-.title {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #dedede;
-  position: relative;
-  padding-left: 10px;
-  &::after {
-    content: '';
-    position: absolute;
-    width: 4px;
-    height: 16px;
-    background: #3c7adf;
-    left: 0px;
-    top: 3px;
-    border-radius: 8px;
-  }
-}
-.data {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .small-data-item {
-    width:25%;
-    height: 90px;
-    display: flex;
-    align-items: center;
-    border-radius: 6px;
-    color: white;
-    padding: 0px 20px;
-    .small-data-item-txt {
-      flex: 1;
-      div {
-        &:nth-child(1) {
-          font-size: 14px;
-         
-        }
-        &:nth-child(2) {
-          font-size: 26px;
-          margin-top: 4px;
-          font-weight: bold;
-          span {
-            font-size: 14px;
-            padding-left: 6px;
-          font-weight: normal;
-          }
-        }
-      }
-    }
-    .img {
-      width: 40px;
-      opacity: 0.5;
-    }
-  }
-  .small-data-item1 {
-    background: linear-gradient(to left, #fd817d, #fcad80);
-  }
-  .small-data-item2 {
-    background: linear-gradient(to left, #46c6fa, #336bfe);
-  }
-  .small-data-item3 {
-    background: linear-gradient(to left, #96a6cc, #595f82);
-  }
-  .small-data-item4 {
-    background: linear-gradient(to left, #08dcd5, #46e2bb);
-  }
-  .small-data-item5 {
-    background: linear-gradient(to left, #f4c46b, #ffb313);
-  }
-  .small-data-item6 {
-    background: linear-gradient(to left, #6eccf8, #02acfd);
-  }
-}
-.two-row {
-  display: flex;
-  align-content: center;
-  .data1 {
-    background: white;
-    padding: 14px;
-  }
-}
-</style>
diff --git a/src/views/Home/components/supplierIndex.vue b/src/views/Home/components/supplierIndex.vue
index 42687dc19..7bc14a644 100644
--- a/src/views/Home/components/supplierIndex.vue
+++ b/src/views/Home/components/supplierIndex.vue
@@ -1,3 +1,4 @@
+<!-- 供应商首页 -->
 <template>
   <div class="one-row">
     <div class="data">
@@ -6,14 +7,14 @@
         <div class="small-data">
           <div class="small-data-item small-data-item1">
             <div class="small-data-item-txt">
-              <div>22<span>单</span></div>
-              <div>开发订单数</div>
+              <div>{{ supplierData?.openPurchaseCount || 0 }}<span>单</span></div>
+              <div>开放订单数</div>
             </div>
             <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
           </div>
           <div class="small-data-item small-data-item2 ml-14px">
             <div class="small-data-item-txt">
-              <div>2456<span>单</span></div>
+              <div>{{ supplierData?.allPurchaseCount || 0 }}<span>单</span></div>
               <div>全部订单数</div>
             </div>
             <img src="../../../assets/imgs/icon5.png" alt="" class="img" />
@@ -25,14 +26,14 @@
         <div class="small-data">
           <div class="small-data-item small-data-item3">
             <div class="small-data-item-txt">
-              <div>255<span>单</span></div>
+              <div>{{ supplierData?.openPurchasePlanCount || 0 }}<span>单</span></div>
               <div>开放计划数</div>
             </div>
             <img src="../../../assets/imgs/icon6.png" alt="" class="img" />
           </div>
           <div class="small-data-item small-data-item4 ml-14px">
             <div class="small-data-item-txt">
-              <div>2555<span>单</span></div>
+              <div>{{ supplierData?.allPurchasePlanCount || 0 }}<span>单</span></div>
               <div>全部计划数</div>
             </div>
             <img src="../../../assets/imgs/icon3.png" alt="" class="img" />
@@ -44,14 +45,14 @@
         <div class="small-data">
           <div class="small-data-item small-data-item5">
             <div class="small-data-item-txt">
-              <div>255<span>单</span></div>
+              <div>{{ supplierData?.notTakeSupplierdeliverCount || 0 }}<span>单</span></div>
               <div>未收货订单数</div>
             </div>
             <img src="../../../assets/imgs/icon4.png" alt="" class="img" />
           </div>
           <div class="small-data-item small-data-item6 ml-14px">
             <div class="small-data-item-txt">
-              <div>2555<span>单</span></div>
+              <div>{{ supplierData?.takeSupplierdeliverCount || 0 }}<span>单</span></div>
               <div>已收货订单数</div>
             </div>
             <img src="../../../assets/imgs/icon2.png" alt="" class="img" />
@@ -62,23 +63,80 @@
     <div class="two-row mt-14px">
       <div class="data1 w-[65%]">
         <div class="title">本月发货单趋势</div>
-        <Echart :options="lineOptions" :height="280" />
+        <Echart :options="lineOptions" :height="280" :key="lineIndex" />
       </div>
       <div class="data1 w-[35%] ml-14px">
         <div class="title">本月发货零件TOP10</div>
-        <Echart :options="pieOptions" :height="280" />
+        <Echart :options="pieOptions" :height="280" :key="lineIndex" />
       </div>
     </div>
     <div class="two-row mt-14px">
-      <div class="data1 w-[50%]">
+      <div class="data1 w-[47.3%]">
         <div class="title">最新消息</div>
-        <el-table :data="tableData" style="width: 100%" stripe  height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
+        <el-table :data="notaicList" style="width: 100%" stripe height="240px">
+          <el-table-column label="编号" align="center" prop="id" />
+          <el-table-column label="用户类型" align="center" prop="userType">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
+            </template>
+          </el-table-column>
+          <el-table-column label="用户编号" align="center" prop="userId" width="80" />
+          <el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
+          <el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
+          <el-table-column
+            label="模版内容"
+            align="center"
+            prop="templateContent"
+            width="200"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="模版参数"
+            align="center"
+            prop="templateParams"
+            width="180"
+            show-overflow-tooltip
+          >
+            <template #default="scope"> {{ scope.row.templateParams }}</template>
+          </el-table-column>
+          <el-table-column label="模版类型" align="center" prop="templateType" width="120">
+            <template #default="scope">
+              <dict-tag
+                :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
+                :value="scope.row.templateType"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="是否已读" align="center" prop="readStatus" width="100">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="阅读时间"
+            align="center"
+            prop="readTime"
+            width="180"
+            :formatter="dateFormatter"
+          />
+          <el-table-column
+            label="创建时间"
+            align="center"
+            prop="createTime"
+            width="180"
+            :formatter="dateFormatter"
+          />
+          <!-- <el-table-column label="操作" align="center"  fixed="right" width="120">
+        <template #default="scope">
+          <el-button link type="primary" @click="openDetail(scope.row)" v-hasPermi="['system:notify-message:query']">
+            <Icon icon="ep:document-copy" />
+            详情
+          </el-button>
+        </template>
+      </el-table-column> -->
         </el-table>
       </div>
-      <div class="data1 w-[50%] ml-14px">
+      <div class="data1 w-[47.3%]">
         <div class="title">最新扣分明细</div>
         <el-table :data="tableData" style="width: 100%" stripe height="240px">
           <el-table-column prop="title" label="标题" />
@@ -88,20 +146,82 @@
       </div>
     </div>
     <div class="two-row mt-14px">
-      <div class="data1 w-[50%]">
+      <div class="data1 w-[47.3%]">
         <div class="title">本月退货明细</div>
-        <el-table :data="tableData" style="width: 100%" stripe  height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
+        <el-table
+          :data="supplierData?.purchasereturnRecordMonth"
+          style="width: 100%"
+          stripe
+          height="240px"
+        >
+          <el-table-column prop="number" label="单据号" width="180" />
+          <el-table-column prop="fromPackingNumber" label="从包装号" width="180" />
+          <el-table-column prop="toPackingNumber" label="到包装号" width="180" />
+          <el-table-column prop="fromContainerNumber" label="从器具号" width="120" />
+          <el-table-column prop="toContainerNumber" label="到器具号" width="120" />
+          <el-table-column prop="fromBatch" label="从批次" width="120" />
+          <el-table-column prop="toBatch" label="到批次" width="120" />
+          <el-table-column prop="altBatch" label="替代批次" width="120" />
+          <el-table-column prop="fromLocationCode" label="从库位代码" width="120" />
+          <el-table-column prop="toLocationCode" label="到库位代码" width="120" />
+          <el-table-column prop="fromLocationGroupCode" label="从库位组代码" width="120" />
+          <el-table-column prop="toLocationGroupCode" label="到库位组代码" width="120" />
+          <el-table-column prop="fromAreaCode" label="从库区代码" width="120" />
+          <el-table-column prop="toAreaCode" label="到库区代码" width="120" />
+          <el-table-column prop="fromOwnerCode" label="从货主代码" width="120" />
+          <el-table-column prop="toOwnerCode" label="到货主代码" width="120" />
+          <el-table-column prop="inventoryStatus" label="库存状态" width="120">
+            <template #default="scope">
+              {{ formatter(scope.row.inventoryStatus,DICT_TYPE.INVENTORY_STATUS) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="poNumber" label="订单号" width="120" />
+          <el-table-column prop="poline" label="订单行" width="120" />
+          <el-table-column prop="reason" label="原因" width="120" />
+          <el-table-column prop="singlePrice" label="单价" width="120" />
+          <el-table-column prop="amount" label="金额" width="120" />
+          <el-table-column prop="itemCode" label="物品代码" width="160" />
+          <el-table-column prop="itemName" label="物品名称" width="120" />
+          <el-table-column prop="itemDesc1" label="物品描述1" width="120" />
+          <el-table-column prop="itemDesc2" label="物品描述2" width="120" />
+          <el-table-column prop="qty" label="数量" width="120" />
+          <el-table-column prop="uom" label="计量单位" width="120">
+            <template #default="scope">
+              {{ formatter(scope.row.uom,DICT_TYPE.UOM) }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="projectCode" label="项目代码" width="120" />
+          <el-table-column prop="remark" label="备注" width="120" />
+          <el-table-column prop="createTime" label="创建时间" width="170">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="creator" label="创建者" width="120" />
         </el-table>
       </div>
-      <div class="data1 w-[50%] ml-14px">
+      <div class="data1 w-[47.3%]">
         <div class="title">本月索赔明细</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
+        <el-table
+          :data="supplierData?.purchasereturnRecordMonth"
+          style="width: 100%"
+          stripe
+          height="240px"
+        >
+          <el-table-column prop="number" label="单据号" width="180" />
+          <el-table-column prop="fromBatch" label="批次" width="120" />
+          <el-table-column prop="poNumber" label="订单号" width="120" />
+          <el-table-column prop="poline" label="订单行" width="120" />
+          <el-table-column prop="reason" label="原因" width="120" />
+          <el-table-column prop="singlePrice" label="单价" width="120" />
+          <el-table-column prop="amount" label="金额" width="120" />
+          <el-table-column prop="code" label="代码" width="160" />
+          <el-table-column prop="createTime" label="创建时间" width="170">
+            <template #default="scope">
+              <span>{{ formatDate(scope.row.createTime) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="creator" label="创建者" width="120" />
         </el-table>
       </div>
     </div>
@@ -111,6 +231,10 @@
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
 import { lineOptions, pieOptions } from '../echarts-data'
+import { formatDate } from '@/utils/formatTime'
+import * as NotifyMessageApi from '@/api/system/notify/message'
+import * as IndexApi from '@/api/home'
+import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 const { t } = useI18n()
 const tableData = [
   {
@@ -150,60 +274,31 @@ const tableData = [
     text: 'No. 189, Grove St, Los Angeles'
   }
 ]
+const supplierData = ref()
+const lineIndex = ref(0)
 // 本月发货单趋势
 const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
 const getInvoiceCharts = async () => {
-  const data = [
-    { value: 20, name: '1日' },
-    { value: 50, name: '2日' },
-    { value: 250, name: '3日' },
-    { value: 220, name: '4日' },
-    { value: 230, name: '5日' },
-    { value: 160, name: '6日' },
-    { value: 120, name: '7日' },
-    { value: 160, name: '8日' },
-    { value: 130, name: '9日' },
-    { value: 240, name: '10日' },
-    { value: 230, name: '11日' },
-    { value: 100, name: '12日' },
-    { value: 40, name: '13日' },
-    { value: 80, name: '14日' },
-    { value: 30, name: '15日' },
-    { value: 88, name: '16日' },
-    { value: 134, name: '17日' },
-    { value: 156, name: '18日' },
-    { value: 143, name: '19日' },
-    { value: 240, name: '20日' },
-    { value: 160, name: '21日' },
-    { value: 160, name: '22日' },
-    { value: 160, name: '23日' },
-    { value: 160, name: '24日' },
-    { value: 160, name: '25日' },
-    { value: 160, name: '26日' },
-    { value: 160, name: '27日' },
-    { value: 160, name: '28日' },
-    { value: 160, name: '29日' },
-    { value: 160, name: '30日' }
-  ]
   set(
     lineOptionsData,
     'xAxis.data',
-    data.map((v) => t(v.name))
+    supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
   )
+  set(lineOptionsData, 'legend.data', ['本月发货单趋势'])
   set(lineOptionsData, 'series', [
     {
-      name: '哈哈',
+      name: '本月发货单趋势',
       smooth: true,
       type: 'line',
       itemStyle: {},
       animationDuration: 2800,
       animationEasing: 'quadraticOut',
-      data: data.map((v) => v.value)
+      data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
     }
   ])
+  lineIndex.value++
 }
 //本月发货零件TOP10
-
 const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
 const getPartTOPCharts = async () => {
   const data = [
@@ -213,21 +308,56 @@ const getPartTOPCharts = async () => {
     { value: 135, name: 'analysis.videoAdvertising' },
     { value: 1548, name: 'analysis.searchEngines' }
   ]
+  console.log(supplierData.value.supplierdeliverItemMonthTop)
   set(
     pieOptionsData,
     'legend.data',
-    data.map((v) => t(v.name))
+    supplierData.value.supplierdeliverItemMonthTop.map((v) => v.itemCode)
   )
-  pieOptionsData!.series![0].data = data.map((v) => {
+  pieOptionsData!.series![0].data = supplierData.value.supplierdeliverItemMonthTop.map((v) => {
     return {
-      name: t(v.name),
-      value: v.value
+      name: v.itemCode,
+      value: v.qty
     }
   })
+  lineIndex.value++
+}
+// 获取供应商数据
+const getSupplierData = async () => {
+  IndexApi.getSupplierData().then((res) => {
+    supplierData.value = res
+    getInvoiceCharts()
+    getPartTOPCharts()
+  })
 }
-
-getInvoiceCharts()
-getPartTOPCharts()
+// 最新消息
+const notaicList = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  userType: undefined,
+  userId: undefined,
+  templateCode: undefined,
+  templateType: undefined,
+  createTime: []
+})
+/** 查询列表 */
+const getList = async () => {
+  try {
+    const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
+    notaicList.value = data.list
+  } finally {
+  }
+}
+const formatter = (type,dict) => {
+  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]
+    .label
+  return str
+}
+onMounted(async () => {
+  await getSupplierData()
+  getList()
+})
 </script>
 <style scoped lang="scss">
 .title {
@@ -314,6 +444,7 @@ getPartTOPCharts()
 .two-row {
   display: flex;
   align-content: center;
+  justify-content: space-between;
   .data1 {
     background: white;
     padding: 14px;
diff --git a/src/views/Home/components/warehouseKeeper.vue b/src/views/Home/components/warehouseKeeper.vue
deleted file mode 100644
index 86671617d..000000000
--- a/src/views/Home/components/warehouseKeeper.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-  <div class="row">
-    <div class="data">
-      <div class="small-data-item small-data-item1">
-        <div class="small-data-item-txt">
-          <div>今日到货计划(已发货)</div>
-          <div>22<span>单</span></div>
-        </div>
-        <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
-      </div>
-      <div class="small-data-item small-data-item2 ml-14px">
-        <div class="small-data-item-txt">
-          <div>今日备料计划(已发料)</div>
-          <div>2456<span>单</span></div>
-        </div>
-        <img src="../../../assets/imgs/icon5.png" alt="" class="img" />
-      </div>
-      <div class="small-data-item small-data-item3 ml-14px">
-        <div class="small-data-item-txt">
-          <div>今日叫料请求(已发料)</div>
-          <div>255<span>单</span></div>
-        </div>
-        <img src="../../../assets/imgs/icon6.png" alt="" class="img" />
-      </div>
-      <div class="small-data-item small-data-item4 ml-14px">
-        <div class="small-data-item-txt">
-          <div>空闲库位数/总库位数</div>
-          <div style="font-size: 20px;">2555<span>个</span>/65555<span>个</span></div>
-        </div>
-        <img src="../../../assets/imgs/icon3.png" alt="" class="img" />
-      </div>
-    </div>
-    <div class="two-row mt-14px">
-      <div class="data1 w-[50%]">
-        <div class="title">呆滞库存预警</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-      <div class="data1 w-[50%] ml-14px">
-        <div class="title">超期库存预警</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-    </div>
-    <div class="two-row mt-14px">
-      <div class="data1 w-[50%]">
-        <div class="title">高低储预警</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-      <div class="data1 w-[50%] ml-14px">
-        <div class="title">待处理任务</div>
-        <el-table :data="tableData" style="width: 100%" stripe height="240px">
-          <el-table-column prop="title" label="标题" />
-          <el-table-column prop="name" label="发布人" />
-          <el-table-column prop="date" label="发布日期" />
-        </el-table>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    title: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-02',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-04',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    title: 'Tom',
-    name: 'Tom',
-    text: 'No. 189, Grove St, Los Angeles'
-  }
-]
-
-</script>
-<style scoped lang="scss">
-.title {
-  padding-bottom: 10px;
-  border-bottom: 1px solid #dedede;
-  position: relative;
-  padding-left: 10px;
-  &::after {
-    content: '';
-    position: absolute;
-    width: 4px;
-    height: 16px;
-    background: #3c7adf;
-    left: 0px;
-    top: 3px;
-    border-radius: 8px;
-  }
-}
-.data {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .small-data-item {
-    width:25%;
-    height: 90px;
-    display: flex;
-    align-items: center;
-    border-radius: 6px;
-    color: white;
-    padding: 0px 20px;
-    .small-data-item-txt {
-      flex: 1;
-      div {
-        &:nth-child(1) {
-          font-size: 14px;
-         
-        }
-        &:nth-child(2) {
-          font-size: 26px;
-          margin-top: 4px;
-          font-weight: bold;
-          span {
-            font-size: 14px;
-            padding-left: 6px;
-          font-weight: normal;
-          }
-        }
-      }
-    }
-    .img {
-      width: 40px;
-      opacity: 0.5;
-    }
-  }
-  .small-data-item1 {
-    background: linear-gradient(to left, #fd817d, #fcad80);
-  }
-  .small-data-item2 {
-    background: linear-gradient(to left, #46c6fa, #336bfe);
-  }
-  .small-data-item3 {
-    background: linear-gradient(to left, #96a6cc, #595f82);
-  }
-  .small-data-item4 {
-    background: linear-gradient(to left, #08dcd5, #46e2bb);
-  }
-  .small-data-item5 {
-    background: linear-gradient(to left, #f4c46b, #ffb313);
-  }
-  .small-data-item6 {
-    background: linear-gradient(to left, #6eccf8, #02acfd);
-  }
-}
-.two-row {
-  display: flex;
-  align-content: center;
-  .data1 {
-    background: white;
-    padding: 14px;
-  }
-}
-</style>