diff --git a/src/views/home/Index copy.vue b/src/views/home/Index copy.vue
new file mode 100644
index 000000000..121ec6a8b
--- /dev/null
+++ b/src/views/home/Index copy.vue	
@@ -0,0 +1,381 @@
+<template>
+  <div>
+    <el-card shadow="never">
+      <el-skeleton :loading="loading" animated>
+        <el-row :gutter="20" justify="space-between">
+          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+            <div class="flex items-center">
+              <img :src="avatar" alt="" class="mr-20px h-70px w-70px rounded-[50%]" />
+              <div>
+                <div class="text-20px">
+                  {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
+                </div>
+                <div class="mt-10px text-14px text-gray-500">
+                  {{ t('workplace.toady') }}，20℃ - 32℃！
+                </div>
+              </div>
+            </div>
+          </el-col>
+          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
+            <div class="h-70px flex items-center justify-end lt-sm:mt-10px">
+              <div class="px-8px text-right">
+                <div class="mb-20px text-14px text-gray-400">{{ t('workplace.project') }}</div>
+                <CountTo
+                  class="text-20px"
+                  :start-val="0"
+                  :end-val="totalSate.project"
+                  :duration="2600"
+                />
+              </div>
+              <el-divider direction="vertical" />
+              <div class="px-8px text-right">
+                <div class="mb-20px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
+                <CountTo
+                  class="text-20px"
+                  :start-val="0"
+                  :end-val="totalSate.todo"
+                  :duration="2600"
+                />
+              </div>
+              <el-divider direction="vertical" border-style="dashed" />
+              <div class="px-8px text-right">
+                <div class="mb-20px text-14px text-gray-400">{{ t('workplace.access') }}</div>
+                <CountTo
+                  class="text-20px"
+                  :start-val="0"
+                  :end-val="totalSate.access"
+                  :duration="2600"
+                />
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </el-skeleton>
+    </el-card>
+  </div>
+
+  <el-row class="mt-5px" :gutter="20" justify="space-between">
+    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
+      <el-card shadow="never">
+        <template #header>
+          <div class="h-3 flex justify-between">
+            <span>{{ t('workplace.project') }}</span>
+            <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-row>
+            <el-col
+              v-for="(item, index) in projects"
+              :key="`card-${index}`"
+              :xl="8"
+              :lg="8"
+              :md="8"
+              :sm="24"
+              :xs="24"
+            >
+              <el-card shadow="hover">
+                <div class="flex items-center">
+                  <Icon :icon="item.icon" :size="25" class="mr-10px" />
+                  <span class="text-16px">{{ item.name }}</span>
+                </div>
+                <div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
+                <div class="mt-20px flex justify-between text-12px text-gray-400">
+                  <span>{{ item.personal }}</span>
+                  <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+
+      <el-card shadow="never" class="mt-5px">
+        <el-skeleton :loading="loading" animated>
+          <el-row :gutter="20" justify="space-between">
+            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
+              <el-card shadow="hover" class="mb-10px">
+                <el-skeleton :loading="loading" animated>
+                  <Echart :options="pieOptionsData" :height="280" />
+                </el-skeleton>
+              </el-card>
+            </el-col>
+            <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
+              <el-card shadow="hover" class="mb-10px">
+                <el-skeleton :loading="loading" animated>
+                  <Echart :options="barOptionsData" :height="280" />
+                </el-skeleton>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
+      <el-card shadow="never">
+        <template #header>
+          <div class="h-3 flex justify-between">
+            <span>{{ t('workplace.shortcutOperation') }}</span>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-row>
+            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-10px">
+              <div class="flex items-center">
+                <Icon :icon="item.icon" class="mr-10px" />
+                <el-link type="default" :underline="false" @click="setWatermark(item.name)">
+                  {{ item.name }}
+                </el-link>
+              </div>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+      <el-card shadow="never" class="mt-10px">
+        <template #header>
+          <div class="h-3 flex justify-between">
+            <span>{{ t('workplace.notice') }}</span>
+            <el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
+            <div class="flex items-center">
+              <img :src="avatar" alt="" class="mr-20px h-35px w-35px rounded-[50%]" />
+              <div>
+                <div class="text-14px">
+                  <Highlight :keys="item.keys.map((v) => t(v))">
+                    {{ item.type }} : {{ item.title }}
+                  </Highlight>
+                </div>
+                <div class="mt-15px text-12px text-gray-400">
+                  {{ formatTime(item.date, 'yyyy-MM-dd') }}
+                </div>
+              </div>
+            </div>
+            <el-divider />
+          </div>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts" setup>
+import { set } from 'lodash-es'
+import { EChartsOption } from 'echarts'
+import { formatTime } from '@/utils'
+
+import { useUserStore } from '@/store/modules/user'
+import { useWatermark } from '@/hooks/web/useWatermark'
+import avatarImg from '@/assets/imgs/avatar.gif'
+import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
+import { pieOptions, barOptions } from './echarts-data'
+
+defineOptions({ name: 'Home' })
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const { setWatermark } = useWatermark()
+const loading = ref(true)
+const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
+const username = userStore.getUser.nickname
+const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
+// 获取统计数
+let totalSate = reactive<WorkplaceTotal>({
+  project: 0,
+  access: 0,
+  todo: 0
+})
+
+const getCount = async () => {
+  const data = {
+    project: 40,
+    access: 2340,
+    todo: 10
+  }
+  totalSate = Object.assign(totalSate, data)
+}
+
+// 获取项目数
+let projects = reactive<Project[]>([])
+const getProject = async () => {
+  const data = [
+    {
+      name: 'Github',
+      icon: 'akar-icons:github-fill',
+      message: 'workplace.introduction',
+      personal: 'Archer',
+      time: new Date()
+    },
+    {
+      name: 'Vue',
+      icon: 'logos:vue',
+      message: 'workplace.introduction',
+      personal: 'Archer',
+      time: new Date()
+    },
+    {
+      name: 'Angular',
+      icon: 'logos:angular-icon',
+      message: 'workplace.introduction',
+      personal: 'Archer',
+      time: new Date()
+    },
+    {
+      name: 'React',
+      icon: 'logos:react',
+      message: 'workplace.introduction',
+      personal: 'Archer',
+      time: new Date()
+    },
+    {
+      name: 'Webpack',
+      icon: 'logos:webpack',
+      message: 'workplace.introduction',
+      personal: 'Archer',
+      time: new Date()
+    },
+    {
+      name: 'Vite',
+      icon: 'vscode-icons:file-type-vite',
+      message: 'workplace.introduction',
+      personal: 'Archer',
+      time: new Date()
+    }
+  ]
+  projects = Object.assign(projects, data)
+}
+
+// 获取通知公告
+let notice = reactive<Notice[]>([])
+const getNotice = async () => {
+  const data = [
+    {
+      title: '系统升级版本',
+      type: '通知',
+      keys: ['通知', '升级'],
+      date: new Date()
+    },
+    {
+      title: '系统凌晨维护',
+      type: '公告',
+      keys: ['公告', '维护'],
+      date: new Date()
+    },
+    {
+      title: '系统升级版本',
+      type: '通知',
+      keys: ['通知', '升级'],
+      date: new Date()
+    },
+    {
+      title: '系统凌晨维护',
+      type: '公告',
+      keys: ['公告', '维护'],
+      date: new Date()
+    }
+  ]
+  notice = Object.assign(notice, data)
+}
+
+// 获取快捷入口
+let shortcut = reactive<Shortcut[]>([])
+
+const getShortcut = async () => {
+  const data = [
+    {
+      name: 'Github',
+      icon: 'akar-icons:github-fill',
+      url: 'github.io'
+    },
+    {
+      name: 'Vue',
+      icon: 'logos:vue',
+      url: 'vuejs.org'
+    },
+    {
+      name: 'Vite',
+      icon: 'vscode-icons:file-type-vite',
+      url: 'https://vitejs.dev/'
+    },
+    {
+      name: 'Angular',
+      icon: 'logos:angular-icon',
+      url: 'github.io'
+    },
+    {
+      name: 'React',
+      icon: 'logos:react',
+      url: 'github.io'
+    },
+    {
+      name: 'Webpack',
+      icon: 'logos:webpack',
+      url: 'github.io'
+    }
+  ]
+  shortcut = Object.assign(shortcut, data)
+}
+
+// 用户来源
+const getUserAccessSource = async () => {
+  const data = [
+    { value: 335, name: 'analysis.directAccess' },
+    { value: 310, name: 'analysis.mailMarketing' },
+    { value: 234, name: 'analysis.allianceAdvertising' },
+    { value: 135, name: 'analysis.videoAdvertising' },
+    { value: 1548, name: 'analysis.searchEngines' }
+  ]
+  set(
+    pieOptionsData,
+    'legend.data',
+    data.map((v) => t(v.name))
+  )
+  pieOptionsData!.series![0].data = data.map((v) => {
+    return {
+      name: t(v.name),
+      value: v.value
+    }
+  })
+}
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+
+// 周活跃量
+const getWeeklyUserActivity = async () => {
+  const data = [
+    { value: 13253, name: 'analysis.monday' },
+    { value: 34235, name: 'analysis.tuesday' },
+    { value: 26321, name: 'analysis.wednesday' },
+    { value: 12340, name: 'analysis.thursday' },
+    { value: 24643, name: 'analysis.friday' },
+    { value: 1322, name: 'analysis.saturday' },
+    { value: 1324, name: 'analysis.sunday' }
+  ]
+  set(
+    barOptionsData,
+    'xAxis.data',
+    data.map((v) => t(v.name))
+  )
+  set(barOptionsData, 'series', [
+    {
+      name: t('analysis.activeQuantity'),
+      data: data.map((v) => v.value),
+      type: 'bar'
+    }
+  ])
+}
+
+const getAllApi = async () => {
+  await Promise.all([
+    getCount(),
+    getProject(),
+    getNotice(),
+    getShortcut(),
+    getUserAccessSource(),
+    getWeeklyUserActivity()
+  ])
+  loading.value = false
+}
+
+getAllApi()
+</script>
diff --git a/src/views/home/Index2.vue b/src/views/home/Index2.vue
new file mode 100644
index 000000000..c9429ab10
--- /dev/null
+++ b/src/views/home/Index2.vue
@@ -0,0 +1,319 @@
+<template>
+  <el-row :class="prefixCls" :gutter="20" justify="space-between">
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
+          <template #default>
+            <div :class="`${prefixCls}__item flex justify-between`">
+              <div>
+                <div
+                  :class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
+                >
+                  <Icon :size="40" icon="svg-icon:peoples" />
+                </div>
+              </div>
+              <div class="flex flex-col justify-between">
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.newUser') }}
+                </div>
+                <CountTo
+                  :duration="2600"
+                  :end-val="102400"
+                  :start-val="0"
+                  class="text-right text-20px font-700"
+                />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
+          <template #default>
+            <div :class="`${prefixCls}__item flex justify-between`">
+              <div>
+                <div
+                  :class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
+                >
+                  <Icon :size="40" icon="svg-icon:message" />
+                </div>
+              </div>
+              <div class="flex flex-col justify-between">
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.unreadInformation') }}
+                </div>
+                <CountTo
+                  :duration="2600"
+                  :end-val="81212"
+                  :start-val="0"
+                  class="text-right text-20px font-700"
+                />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
+          <template #default>
+            <div :class="`${prefixCls}__item flex justify-between`">
+              <div>
+                <div
+                  :class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
+                >
+                  <Icon :size="40" icon="svg-icon:money" />
+                </div>
+              </div>
+              <div class="flex flex-col justify-between">
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.transactionAmount') }}
+                </div>
+                <CountTo
+                  :duration="2600"
+                  :end-val="9280"
+                  :start-val="0"
+                  class="text-right text-20px font-700"
+                />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+
+    <el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="2" animated>
+          <template #default>
+            <div :class="`${prefixCls}__item flex justify-between`">
+              <div>
+                <div
+                  :class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
+                >
+                  <Icon :size="40" icon="svg-icon:shopping" />
+                </div>
+              </div>
+              <div class="flex flex-col justify-between">
+                <div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
+                  >{{ t('analysis.totalShopping') }}
+                </div>
+                <CountTo
+                  :duration="2600"
+                  :end-val="13600"
+                  :start-val="0"
+                  class="text-right text-20px font-700"
+                />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+  </el-row>
+  <el-row :gutter="20" justify="space-between">
+    <el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="300" :options="pieOptionsData" />
+        </el-skeleton>
+      </el-card>
+    </el-col>
+    <el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" animated>
+          <Echart :height="300" :options="barOptionsData" />
+        </el-skeleton>
+      </el-card>
+    </el-col>
+    <el-col :span="24">
+      <el-card class="mb-20px" shadow="hover">
+        <el-skeleton :loading="loading" :rows="4" animated>
+          <Echart :height="350" :options="lineOptionsData" />
+        </el-skeleton>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script lang="ts" setup>
+import { set } from 'lodash-es'
+import { EChartsOption } from 'echarts'
+
+import { useDesign } from '@/hooks/web/useDesign'
+import type { AnalysisTotalTypes } from './types'
+import { barOptions, lineOptions, pieOptions } from './echarts-data'
+
+defineOptions({ name: 'Home2' })
+
+const { t } = useI18n()
+const loading = ref(true)
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('panel')
+const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
+
+let totalState = reactive<AnalysisTotalTypes>({
+  users: 0,
+  messages: 0,
+  moneys: 0,
+  shoppings: 0
+})
+
+const getCount = async () => {
+  const data = {
+    users: 102400,
+    messages: 81212,
+    moneys: 9280,
+    shoppings: 13600
+  }
+  totalState = Object.assign(totalState, data)
+}
+
+// 用户来源
+const getUserAccessSource = async () => {
+  const data = [
+    { value: 335, name: 'analysis.directAccess' },
+    { value: 310, name: 'analysis.mailMarketing' },
+    { value: 234, name: 'analysis.allianceAdvertising' },
+    { value: 135, name: 'analysis.videoAdvertising' },
+    { value: 1548, name: 'analysis.searchEngines' }
+  ]
+  set(
+    pieOptionsData,
+    'legend.data',
+    data.map((v) => t(v.name))
+  )
+  set(pieOptionsData, 'series.data', data)
+}
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+
+// 周活跃量
+const getWeeklyUserActivity = async () => {
+  const data = [
+    { value: 13253, name: 'analysis.monday' },
+    { value: 34235, name: 'analysis.tuesday' },
+    { value: 26321, name: 'analysis.wednesday' },
+    { value: 12340, name: 'analysis.thursday' },
+    { value: 24643, name: 'analysis.friday' },
+    { value: 1322, name: 'analysis.saturday' },
+    { value: 1324, name: 'analysis.sunday' }
+  ]
+  set(
+    barOptionsData,
+    'xAxis.data',
+    data.map((v) => t(v.name))
+  )
+  set(barOptionsData, 'series', [
+    {
+      name: t('analysis.activeQuantity'),
+      data: data.map((v) => v.value),
+      type: 'bar'
+    }
+  ])
+}
+
+const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
+
+// 每月销售总额
+const getMonthlySales = async () => {
+  const data = [
+    { estimate: 100, actual: 120, name: 'analysis.january' },
+    { estimate: 120, actual: 82, name: 'analysis.february' },
+    { estimate: 161, actual: 91, name: 'analysis.march' },
+    { estimate: 134, actual: 154, name: 'analysis.april' },
+    { estimate: 105, actual: 162, name: 'analysis.may' },
+    { estimate: 160, actual: 140, name: 'analysis.june' },
+    { estimate: 165, actual: 145, name: 'analysis.july' },
+    { estimate: 114, actual: 250, name: 'analysis.august' },
+    { estimate: 163, actual: 134, name: 'analysis.september' },
+    { estimate: 185, actual: 56, name: 'analysis.october' },
+    { estimate: 118, actual: 99, name: 'analysis.november' },
+    { estimate: 123, actual: 123, name: 'analysis.december' }
+  ]
+  set(
+    lineOptionsData,
+    'xAxis.data',
+    data.map((v) => t(v.name))
+  )
+  set(lineOptionsData, 'series', [
+    {
+      name: t('analysis.estimate'),
+      smooth: true,
+      type: 'line',
+      data: data.map((v) => v.estimate),
+      animationDuration: 2800,
+      animationEasing: 'cubicInOut'
+    },
+    {
+      name: t('analysis.actual'),
+      smooth: true,
+      type: 'line',
+      itemStyle: {},
+      data: data.map((v) => v.actual),
+      animationDuration: 2800,
+      animationEasing: 'quadraticOut'
+    }
+  ])
+}
+
+const getAllApi = async () => {
+  await Promise.all([getCount(), getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
+  loading.value = false
+}
+
+getAllApi()
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-panel;
+
+.#{$prefix-cls} {
+  &__item {
+    &--peoples {
+      color: #40c9c6;
+    }
+
+    &--message {
+      color: #36a3f7;
+    }
+
+    &--money {
+      color: #f4516c;
+    }
+
+    &--shopping {
+      color: #34bfa3;
+    }
+
+    &:hover {
+      :deep(.#{$namespace}-icon) {
+        color: #fff !important;
+      }
+
+      .#{$prefix-cls}__item--icon {
+        transition: all 0.38s ease-out;
+      }
+
+      .#{$prefix-cls}__item--peoples {
+        background: #40c9c6;
+      }
+
+      .#{$prefix-cls}__item--message {
+        background: #36a3f7;
+      }
+
+      .#{$prefix-cls}__item--money {
+        background: #f4516c;
+      }
+
+      .#{$prefix-cls}__item--shopping {
+        background: #34bfa3;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/home/components/material.vue b/src/views/home/components/material.vue
new file mode 100644
index 000000000..83aadaa35
--- /dev/null
+++ b/src/views/home/components/material.vue
@@ -0,0 +1,336 @@
+<!-- 原料管理员首页 -->
+<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="materialData?.warningBalanceList"
+          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>
+        <Echart :options="barOptions" :height="280" :key="lineIndex" />
+      </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'
+import { set } from 'lodash-es'
+import { EChartsOption } from 'echarts'
+import { barOptions } from '../echarts-data'
+const lineIndex = ref(0)
+
+const materialData = ref()
+// 获取原料管理员数据
+const getMaterialData = async () => {
+ await IndexApi.getMaterialData().then((res) => {
+    materialData.value = res
+    getJobCharts()
+  })
+}
+const formatter = (type, dict) => {
+  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
+  return str
+}
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+const getJobCharts = async () => {
+  set(
+    barOptionsData,
+    'xAxis.data',
+    Object.keys( materialData.value.jobCount)
+  )
+  set(barOptionsData, 'legend.data', ['待处理任务'])
+  set(barOptionsData, 'series', [
+    {
+      name:'待处理任务',
+      data: Object.values( materialData.value.jobCount),
+      type: 'bar',
+      barMaxWidth:30
+    }
+  ])
+  lineIndex.value++
+}
+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..c289ec0c0
--- /dev/null
+++ b/src/views/home/components/produce.vue
@@ -0,0 +1,286 @@
+<!-- 生产管理员首页 -->
+<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>
+        <Echart :options="barOptions" :height="280" :key="lineIndex" />
+      </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'
+import { set } from 'lodash-es'
+import { EChartsOption } from 'echarts'
+import { barOptions } from '../echarts-data'
+const lineIndex = ref(0)
+const produceData = ref()
+// 获取生产管理员首页数据
+const getProduceData = async () => {
+  IndexApi.getProduceData().then((res) => {
+    produceData.value = res
+    getJobCharts()
+  })
+}
+const formatter = (type, dict) => {
+  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
+  return str
+}
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+const getJobCharts = async () => {
+  set(
+    barOptionsData,
+    'xAxis.data',
+    Object.keys( produceData.value.jobCount)
+  )
+  set(barOptionsData, 'legend.data', ['待处理任务'])
+  set(barOptionsData, 'series', [
+    {
+      name:'待处理任务',
+      data: Object.values( produceData.value.jobCount),
+      type: 'bar',
+      barMaxWidth:30
+    }
+  ])
+  lineIndex.value++
+}
+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..5124d9c11
--- /dev/null
+++ b/src/views/home/components/product.vue
@@ -0,0 +1,313 @@
+<!-- 成品管理员首页 -->
+<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="productData?.warningBalanceList"
+          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>
+        <Echart :options="barOptions" :height="280" :key="lineIndex" />
+      </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'
+import { set } from 'lodash-es'
+import { EChartsOption } from 'echarts'
+import { barOptions } from '../echarts-data'
+const lineIndex = ref(0)
+// 获取成品管理员首页首页数据
+const productData = ref()
+const getProductData = async () => {
+  IndexApi.getProductData().then((res) => {
+    productData.value = res
+    getJobCharts()
+  })
+}
+const formatter = (type, dict) => {
+  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
+  return str
+}
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+const getJobCharts = async () => {
+  set(
+    barOptionsData,
+    'xAxis.data',
+    Object.keys( productData.value.jobCount)
+  )
+  set(barOptionsData, 'legend.data', ['待处理任务'])
+  set(barOptionsData, 'series', [
+    {
+      name:'待处理任务',
+      data: Object.values( productData.value.jobCount),
+      type: 'bar',
+      barMaxWidth:30
+    }
+  ])
+  lineIndex.value++
+}
+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/supplierIndex.vue b/src/views/home/components/supplierIndex.vue
new file mode 100644
index 000000000..c665f9867
--- /dev/null
+++ b/src/views/home/components/supplierIndex.vue
@@ -0,0 +1,452 @@
+<!-- 供应商首页 -->
+<template>
+  <div class="one-row">
+    <div class="data">
+      <div class="data-item">
+        <div class="small-title">订单数</div>
+        <div class="small-data">
+          <div class="small-data-item small-data-item1">
+            <div class="small-data-item-txt">
+              <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>{{ supplierData?.allPurchaseCount || 0 }}<span>单</span></div>
+              <div>全部订单数</div>
+            </div>
+            <img src="../../../assets/imgs/icon5.png" alt="" class="img" />
+          </div>
+        </div>
+      </div>
+      <div class="data-item ml-14px">
+        <div class="small-title">要货计划数</div>
+        <div class="small-data">
+          <div class="small-data-item small-data-item3">
+            <div class="small-data-item-txt">
+              <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>{{ supplierData?.allPurchasePlanCount || 0 }}<span>单</span></div>
+              <div>全部计划数</div>
+            </div>
+            <img src="../../../assets/imgs/icon3.png" alt="" class="img" />
+          </div>
+        </div>
+      </div>
+      <div class="data-item ml-14px">
+        <div class="small-title">发货单数</div>
+        <div class="small-data">
+          <div class="small-data-item small-data-item5">
+            <div class="small-data-item-txt">
+              <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>{{ supplierData?.takeSupplierdeliverCount || 0 }}<span>单</span></div>
+              <div>已收货订单数</div>
+            </div>
+            <img src="../../../assets/imgs/icon2.png" alt="" class="img" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="two-row mt-14px">
+      <div class="data1 w-[65%]">
+        <div class="title">本月发货单趋势</div>
+        <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" :key="lineIndex" />
+      </div>
+    </div>
+    <div class="two-row mt-14px">
+      <div class="data1 w-[47.3%]">
+        <div class="title">最新消息</div>
+        <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-[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 class="two-row mt-14px">
+      <div class="data1 w-[47.3%]">
+        <div class="title">本月退货明细</div>
+        <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-[47.3%]">
+        <div class="title">本月索赔明细</div>
+        <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>
+  </div>
+</template>
+<script lang="ts" setup>
+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 = [
+  {
+    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 supplierData = ref()
+const lineIndex = ref(0)
+// 本月发货单趋势
+const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
+const getInvoiceCharts = async () => {
+  set(
+    lineOptionsData,
+    'xAxis.data',
+    supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
+  )
+  set(lineOptionsData, 'legend.data', ['本月发货单趋势'])
+  set(lineOptionsData, 'series', [
+    {
+      name: '本月发货单趋势',
+      smooth: true,
+      type: 'line',
+      itemStyle: {},
+      animationDuration: 2800,
+      animationEasing: 'quadraticOut',
+      data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
+    }
+  ])
+  lineIndex.value++
+}
+//本月发货零件TOP10
+const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
+const getPartTOPCharts = async () => {
+  const data = [
+    { value: 335, name: 'analysis.directAccess' },
+    { value: 310, name: 'analysis.mailMarketing' },
+    { value: 234, name: 'analysis.allianceAdvertising' },
+    { value: 135, name: 'analysis.videoAdvertising' },
+    { value: 1548, name: 'analysis.searchEngines' }
+  ]
+  console.log(supplierData.value.supplierdeliverItemMonthTop)
+  set(
+    pieOptionsData,
+    'legend.data',
+    supplierData.value.supplierdeliverItemMonthTop.map((v) => v.itemCode)
+  )
+  pieOptionsData!.series![0].data = supplierData.value.supplierdeliverItemMonthTop.map((v) => {
+    return {
+      name: v.itemCode,
+      value: v.qty
+    }
+  })
+  lineIndex.value++
+}
+// 获取供应商数据
+const getSupplierData = async () => {
+  IndexApi.getSupplierData().then((res) => {
+    supplierData.value = res
+    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 {
+  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;
+  .data-item {
+    width: calc(100% / 3);
+    padding: 10px 0px;
+    background: white;
+    .small-title {
+      padding: 0px 14px 10px;
+    }
+    .small-data {
+      display: flex;
+      align-content: center;
+      justify-content: space-between;
+      padding: 0px 14px;
+      .small-data-item {
+        width: 50%;
+        height: 70px;
+        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: 20px;
+              span {
+                font-size: 12px;
+                padding-left: 6px;
+              }
+            }
+            &:nth-child(2) {
+              font-size: 12px;
+            }
+          }
+        }
+        .img {
+          width: 30px;
+          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/echarts-data.ts b/src/views/home/echarts-data.ts
new file mode 100644
index 000000000..15c7b4afd
--- /dev/null
+++ b/src/views/home/echarts-data.ts
@@ -0,0 +1,286 @@
+import { EChartsOption } from 'echarts'
+
+const { t } = useI18n()
+
+export const lineOptions: EChartsOption = {
+  
+  xAxis: {
+    data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30
+    ],
+    boundaryGap: false,
+    axisTick: {
+      show: false
+    }
+  },
+  grid: {
+    left: 20,
+    right: 20,
+    bottom: 20,
+    top: 50,
+    containLabel: true
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross'
+    },
+    padding: [5, 10]
+  },
+  yAxis: {
+    axisTick: {
+      show: false
+    }
+  },
+  legend: {
+    data: ['销售','哈哈'],
+    top: 20
+  },
+  series: [
+    {
+      name: '销售',
+      smooth: true,
+      type: 'line',
+      data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
+      animationDuration: 2800,
+      animationEasing: 'cubicInOut'
+    },
+    {
+      name: '哈哈',
+      smooth: true,
+      type: 'line',
+      itemStyle: {},
+      data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
+      animationDuration: 2800,
+      animationEasing: 'quadraticOut'
+    }
+  ]
+}
+
+export const pieOptions: EChartsOption = {
+  // title: {
+  //   text: t('analysis.userAccessSource'),
+  //   left: 'center'
+  // },
+  tooltip: {
+    trigger: 'item',
+    formatter: '{a} <br/>{b} : {c} ({d}%)'
+  },
+  legend: {
+    orient: 'vertical',
+    left: 'left',
+    top:20,
+    data: [
+      t('analysis.directAccess'),
+      t('analysis.mailMarketing'),
+      t('analysis.allianceAdvertising'),
+      t('analysis.videoAdvertising'),
+      t('analysis.searchEngines')
+    ]
+  },
+  series: [
+    {
+      name: t('analysis.userAccessSource'),
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '60%'],
+      data: [
+        { value: 335, name: t('analysis.directAccess') },
+        { value: 310, name: t('analysis.mailMarketing') },
+        { value: 234, name: t('analysis.allianceAdvertising') },
+        { value: 135, name: t('analysis.videoAdvertising') },
+        { value: 1548, name: t('analysis.searchEngines') }
+      ]
+    }
+  ]
+}
+
+export const barOptions: EChartsOption = {
+  title: {
+    text: '',
+    left: 'center'
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  grid: {
+    left: 50,
+    right: 20,
+    bottom: 20
+  },
+  xAxis: {
+    type: 'category',
+    data: [],
+    axisTick: {
+      alignWithLabel: true
+    }
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: t('analysis.activeQuantity'),
+      data: [],
+      type: 'bar'
+    }
+  ]
+}
+
+export const radarOption: EChartsOption = {
+  legend: {
+    data: [t('workplace.personal'), t('workplace.team')]
+  },
+  radar: {
+    // shape: 'circle',
+    indicator: [
+      { name: t('workplace.quote'), max: 65 },
+      { name: t('workplace.contribution'), max: 160 },
+      { name: t('workplace.hot'), max: 300 },
+      { name: t('workplace.yield'), max: 130 },
+      { name: t('workplace.follow'), max: 100 }
+    ]
+  },
+  series: [
+    {
+      name: `xxx${t('workplace.index')}`,
+      type: 'radar',
+      data: [
+        {
+          value: [42, 30, 20, 35, 80],
+          name: t('workplace.personal')
+        },
+        {
+          value: [50, 140, 290, 100, 90],
+          name: t('workplace.team')
+        }
+      ]
+    }
+  ]
+}
+
+export const wordOptions = {
+  series: [
+    {
+      type: 'wordCloud',
+      gridSize: 2,
+      sizeRange: [12, 50],
+      rotationRange: [-90, 90],
+      shape: 'pentagon',
+      width: 600,
+      height: 400,
+      drawOutOfBound: true,
+      textStyle: {
+        color: function () {
+          return (
+            'rgb(' +
+            [
+              Math.round(Math.random() * 160),
+              Math.round(Math.random() * 160),
+              Math.round(Math.random() * 160)
+            ].join(',') +
+            ')'
+          )
+        }
+      },
+      emphasis: {
+        textStyle: {
+          shadowBlur: 10,
+          shadowColor: '#333'
+        }
+      },
+      data: [
+        {
+          name: 'Sam S Club',
+          value: 10000,
+          textStyle: {
+            color: 'black'
+          },
+          emphasis: {
+            textStyle: {
+              color: 'red'
+            }
+          }
+        },
+        {
+          name: 'Macys',
+          value: 6181
+        },
+        {
+          name: 'Amy Schumer',
+          value: 4386
+        },
+        {
+          name: 'Jurassic World',
+          value: 4055
+        },
+        {
+          name: 'Charter Communications',
+          value: 2467
+        },
+        {
+          name: 'Chick Fil A',
+          value: 2244
+        },
+        {
+          name: 'Planet Fitness',
+          value: 1898
+        },
+        {
+          name: 'Pitch Perfect',
+          value: 1484
+        },
+        {
+          name: 'Express',
+          value: 1112
+        },
+        {
+          name: 'Home',
+          value: 965
+        },
+        {
+          name: 'Johnny Depp',
+          value: 847
+        },
+        {
+          name: 'Lena Dunham',
+          value: 582
+        },
+        {
+          name: 'Lewis Hamilton',
+          value: 555
+        },
+        {
+          name: 'KXAN',
+          value: 550
+        },
+        {
+          name: 'Mary Ellen Mark',
+          value: 462
+        },
+        {
+          name: 'Farrah Abraham',
+          value: 366
+        },
+        {
+          name: 'Rita Ora',
+          value: 360
+        },
+        {
+          name: 'Serena Williams',
+          value: 282
+        },
+        {
+          name: 'NCAA baseball tournament',
+          value: 273
+        },
+        {
+          name: 'Point Break',
+          value: 265
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 000000000..1cc81ac3a
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <supplierIndex v-hasRole="['super_admin','supplier']"/>
+    <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 material from './components/material.vue'
+  import product from './components/product.vue'
+  import produce from './components/produce.vue'
+</script>
diff --git a/src/views/home/types.ts b/src/views/home/types.ts
new file mode 100644
index 000000000..e6313d36c
--- /dev/null
+++ b/src/views/home/types.ts
@@ -0,0 +1,55 @@
+export type WorkplaceTotal = {
+  project: number
+  access: number
+  todo: number
+}
+
+export type Project = {
+  name: string
+  icon: string
+  message: string
+  personal: string
+  time: Date | number | string
+}
+
+export type Notice = {
+  title: string
+  type: string
+  keys: string[]
+  date: Date | number | string
+}
+
+export type Shortcut = {
+  name: string
+  icon: string
+  url: string
+}
+
+export type RadarData = {
+  personal: number
+  team: number
+  max: number
+  name: string
+}
+export type AnalysisTotalTypes = {
+  users: number
+  messages: number
+  moneys: number
+  shoppings: number
+}
+
+export type UserAccessSource = {
+  value: number
+  name: string
+}
+
+export type WeeklyUserActivity = {
+  value: number
+  name: string
+}
+
+export type MonthlySales = {
+  name: string
+  estimate: number
+  actual: number
+}