From c41ffa1852fc8b7f8938718730c554c0371abb9a Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Tue, 15 Oct 2024 18:57:00 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.local                  |   2 +-
 .env.prod                   |   2 +-
 .env.test                   |   2 +-
 src/views/Home/Index-bk.vue | 391 +++++++++++++++++++++++++++
 src/views/Home/Index.vue    | 523 +++++++++++++++++++++++++++---------
 src/views/Home/types.ts     |  12 +-
 6 files changed, 795 insertions(+), 137 deletions(-)
 create mode 100644 src/views/Home/Index-bk.vue

diff --git a/.env.local b/.env.local
index ad08470..0509fc0 100644
--- a/.env.local
+++ b/.env.local
@@ -4,7 +4,7 @@ NODE_ENV=development
 VITE_DEV=true
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
+VITE_BASE_URL='http://localhost:48081'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
 VITE_UPLOAD_TYPE=server
diff --git a/.env.prod b/.env.prod
index 8b78c41..f3a8444 100644
--- a/.env.prod
+++ b/.env.prod
@@ -4,7 +4,7 @@ NODE_ENV=production
 VITE_DEV=false
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
+VITE_BASE_URL='http://localhost:48081'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
diff --git a/.env.test b/.env.test
index 80f4c66..92395e8 100644
--- a/.env.test
+++ b/.env.test
@@ -4,7 +4,7 @@ NODE_ENV=production
 VITE_DEV=false
 
 # 请求路径
-VITE_BASE_URL='http://localhost:48080'
+VITE_BASE_URL='http://localhost:48081'
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
diff --git a/src/views/Home/Index-bk.vue b/src/views/Home/Index-bk.vue
new file mode 100644
index 0000000..ed523e1
--- /dev/null
+++ b/src/views/Home/Index-bk.vue
@@ -0,0 +1,391 @@
+<template>
+<!--  <div>-->
+<!--    <el-card shadow="never">-->
+<!--      <el-skeleton :loading="loading" animated>-->
+<!--        <el-row :gutter="16" justify="space-between">-->
+<!--          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">-->
+<!--            <div class="flex items-center">-->
+<!--              <el-avatar :src="avatar" :size="70" class="mr-16px">-->
+<!--                <img src="@/assets/imgs/avatar.gif" alt="" />-->
+<!--              </el-avatar>-->
+<!--              <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-16px 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-16px 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-16px 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-8px" :gutter="8" justify="space-between">
+    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
+<!--      <el-card shadow="never">-->
+<!--        <template #header>-->
+<!--          <div class="h-3 flex justify-between">-->
+<!--            <span>{{ t('workplace.project') }}</span>-->
+<!--            <el-link-->
+<!--              type="primary"-->
+<!--              :underline="false"-->
+<!--              href="https://github.com/yudaocode"-->
+<!--              target="_blank"-->
+<!--            >-->
+<!--              {{ 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" class="mr-5px mt-5px">-->
+<!--                <div class="flex items-center">-->
+<!--                  <Icon :icon="item.icon" :size="25" class="mr-8px" />-->
+<!--                  <span class="text-16px">{{ item.name }}</span>-->
+<!--                </div>-->
+<!--                <div class="mt-12px text-9px text-gray-400">{{ t(item.message) }}</div>-->
+<!--                <div class="mt-12px 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-8px">-->
+<!--        <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-8px">-->
+<!--                <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-8px">-->
+<!--                <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-8px">
+<!--      <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-8px">-->
+<!--              <div class="flex items-center">-->
+<!--                <Icon :icon="item.icon" class="mr-8px" />-->
+<!--                <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-8px">-->
+<!--        <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">-->
+<!--              <el-avatar :src="avatar" :size="35" class="mr-16px">-->
+<!--                <img src="@/assets/imgs/avatar.gif" alt="" />-->
+<!--              </el-avatar>-->
+<!--              <div>-->
+<!--                <div class="text-14px">-->
+<!--                  <Highlight :keys="item.keys.map((v) => t(v))">-->
+<!--                    {{ item.type }} : {{ item.title }}-->
+<!--                  </Highlight>-->
+<!--                </div>-->
+<!--                <div class="mt-16px 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 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
+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: 'ruoyi-vue-pro',
+      icon: 'akar-icons:github-fill',
+      message: 'https://github.com/YunaiV/ruoyi-vue-pro',
+      personal: 'Spring Boot 单体架构',
+      time: new Date()
+    },
+    {
+      name: 'yudao-ui-admin-vue3',
+      icon: 'logos:vue',
+      message: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
+      personal: 'Vue3 + element-plus',
+      time: new Date()
+    },
+    {
+      name: 'yudao-ui-admin-vben',
+      icon: 'logos:vue',
+      message: 'https://github.com/yudaocode/yudao-ui-admin-vben',
+      personal: 'Vue3 + vben(antd)',
+      time: new Date()
+    },
+    {
+      name: 'yudao-cloud',
+      icon: 'akar-icons:github',
+      message: 'https://github.com/YunaiV/yudao-cloud',
+      personal: 'Spring Cloud 微服务架构',
+      time: new Date()
+    },
+    {
+      name: 'yudao-ui-mall-uniapp',
+      icon: 'logos:vue',
+      message: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
+      personal: 'Vue3 + uniapp',
+      time: new Date()
+    },
+    {
+      name: 'yudao-ui-admin-vue2',
+      icon: 'logos:vue',
+      message: 'https://github.com/yudaocode/yudao-ui-admin-vue2',
+      personal: 'Vue2 + element-ui',
+      time: new Date()
+    }
+  ]
+  projects = Object.assign(projects, data)
+}
+
+// 获取通知公告
+let notice = reactive<Notice[]>([])
+const getNotice = async () => {
+  const data = [
+    {
+      title: '系统支持 JDK 8/17/21，Vue 2/3',
+      type: '通知',
+      keys: ['通知', '8', '17', '21', '2', '3'],
+      date: new Date()
+    },
+    {
+      title: '后端提供 Spring Boot 2.7/3.2 + Cloud 双架构',
+      type: '公告',
+      keys: ['公告', 'Boot', 'Cloud'],
+      date: new Date()
+    },
+    {
+      title: '全部开源，个人与企业可 100% 直接使用，无需授权',
+      type: '通知',
+      keys: ['通知', '无需授权'],
+      date: new Date()
+    },
+    {
+      title: '国内使用最广泛的快速开发平台，超 300+ 人贡献',
+      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/Index.vue b/src/views/Home/Index.vue
index c59b9d2..aae823c 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,185 +1,349 @@
 <template>
-  <div>
-    <el-card shadow="never">
-      <el-skeleton :loading="loading" animated>
-        <el-row :gutter="16" justify="space-between">
-          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
-            <div class="flex items-center">
-              <el-avatar :src="avatar" :size="70" class="mr-16px">
-                <img src="@/assets/imgs/avatar.gif" alt="" />
-              </el-avatar>
-              <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-16px 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-16px 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-16px 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>
+<!--  <div>-->
+<!--    <el-card shadow="hover" style="margin-bottom: 10px;height: 250px">-->
+<!--      <el-carousel :interval="4000" height="205px">-->
+<!--        <el-carousel-item v-for="item in image"  :key="item.id">-->
+<!--          <el-image  style="width: 100%; height: 100%" :src="item.src" alt="无图片" :title="item.name"/>-->
+<!--        </el-carousel-item>-->
+<!--      </el-carousel>-->
+<!--    </el-card>-->
+<!--  </div>-->
 
-  <el-row class="mt-8px" :gutter="8" justify="space-between">
-    <el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <el-card shadow="never">
-        <template #header>
-          <div class="h-3 flex justify-between">
-            <span>{{ t('workplace.project') }}</span>
+  <el-row class="mt-8px" :gutter="8" justify="space-between" >
+    <el-col :xl="7" :lg="7" :md="24" :sm="24" :xs="24">
+      <el-card shadow="hover">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">要闻速递</span>
             <el-link
               type="primary"
               :underline="false"
-              href="https://github.com/yudaocode"
               target="_blank"
+              style="margin-top: 10px"
             >
-              {{ t('action.more') }}
+              更多>>
+            </el-link>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-card shadow="hover" style="margin-bottom: 10px;height: 200px">
+            <el-carousel :interval="4000" height="200px" @change="handleCarouselChange" ref="carousel">
+              <el-carousel-item v-for="item in image"  :key="item.id">
+                <el-image  style="width: 100%; height: 100%" :src="item.src" alt="无图片" :title="item.name"/>
+              </el-carousel-item>
+            </el-carousel>
+          </el-card>
+          <el-row>
+            <el-col :span="18">
+              <span v-if="image[pageNo - 1]">{{image[pageNo-1].title}}</span>
+            </el-col>
+            <el-col :span="6">
+              <el-pagination
+                size="small"
+                layout="prev, pager, next"
+                v-model:current-page="pageNo"
+                :total="image.length"
+                :page-size="1"
+                @current-change="handlePageChange"
+              />
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+      <el-card shadow="hover" class="mt-8px">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">要闻速递</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              target="_blank"
+              style="margin-top: 10px"
+            >
+              更多>>
             </el-link>
           </div>
         </template>
         <el-skeleton :loading="loading" animated>
           <el-row>
             <el-col
-              v-for="(item, index) in projects"
+              v-for="(item,index) in todo"
               :key="`card-${index}`"
-              :xl="8"
-              :lg="8"
-              :md="8"
-              :sm="24"
-              :xs="24"
             >
-              <el-card shadow="hover" class="mr-5px mt-5px">
-                <div class="flex items-center">
-                  <Icon :icon="item.icon" :size="25" class="mr-8px" />
-                  <span class="text-16px">{{ item.name }}</span>
-                </div>
-                <div class="mt-12px text-9px text-gray-400">{{ t(item.message) }}</div>
-                <div class="mt-12px flex justify-between text-12px text-gray-400">
-                  <span>{{ item.personal }}</span>
-                  <span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
-                </div>
-              </el-card>
+              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
             </el-col>
           </el-row>
         </el-skeleton>
       </el-card>
-
-      <el-card shadow="never" class="mt-8px">
+      <el-card shadow="hover" class="mt-8px">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">系统聚焦</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              target="_blank"
+              style="margin-top: 10px"
+            >
+              更多>>
+            </el-link>
+          </div>
+        </template>
         <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-8px">
-                <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-8px">
-                <el-skeleton :loading="loading" animated>
-                  <Echart :options="barOptionsData" :height="280" />
-                </el-skeleton>
-              </el-card>
+          <el-row>
+            <el-col
+              v-for="(item,index) in todo"
+              :key="`card-${index}`"
+            >
+              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
             </el-col>
           </el-row>
         </el-skeleton>
       </el-card>
     </el-col>
-    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
-      <el-card shadow="never">
-        <template #header>
-          <div class="h-3 flex justify-between">
-            <span>{{ t('workplace.shortcutOperation') }}</span>
+    <el-col :xl="11" :lg="11" :md="24" :sm="24" :xs="24" class="mb-8px">
+      <el-card shadow="hover">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">事务</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              target="_blank"
+              style="margin-top: 10px"
+            >
+              更多>>
+            </el-link>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-tabs type="border-card" class="demo-tabs">
+            <el-tab-pane label="待办">
+              <el-row>
+                <el-col
+                  v-for="(item,index) in todo"
+                  :key="`card-${index}`"
+                >
+                  <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="待阅">
+              <el-row>
+                <el-col
+                  v-for="(item,index) in todo"
+                  :key="`card-${index}`"
+                >
+                  <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;c" >* {{item.title}}</span>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="已办">
+              <el-row>
+                <el-col
+                  v-for="(item,index) in todo"
+                  :key="`card-${index}`"
+                >
+                  <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="已阅">
+              <el-row>
+                <el-col
+                  v-for="(item,index) in todo"
+                  :key="`card-${index}`"
+                >
+                  <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+          </el-tabs>
+        </el-skeleton>
+      </el-card>
+      <el-card shadow="hover" class="mt-8px">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">报销单</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              target="_blank"
+              style="margin-top: 10px"
+            >
+              更多>>
+            </el-link>
           </div>
         </template>
         <el-skeleton :loading="loading" animated>
           <el-row>
-            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">
-              <div class="flex items-center">
-                <Icon :icon="item.icon" class="mr-8px" />
-                <el-link type="default" :underline="false" @click="setWatermark(item.name)">
-                  {{ item.name }}
-                </el-link>
-              </div>
+            <el-col
+              v-for="(item,index) in todo"
+              :key="`card-${index}`"
+            >
+              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
             </el-col>
           </el-row>
         </el-skeleton>
       </el-card>
-      <el-card shadow="never" class="mt-8px">
-        <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>
+      <el-card shadow="hover" class="mt-8px">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">会议室管理</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              target="_blank"
+              style="margin-top: 10px"
+            >
+              更多>>
+            </el-link>
           </div>
         </template>
         <el-skeleton :loading="loading" animated>
-          <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
-            <div class="flex items-center">
-              <el-avatar :src="avatar" :size="35" class="mr-16px">
-                <img src="@/assets/imgs/avatar.gif" alt="" />
-              </el-avatar>
-              <div>
-                <div class="text-14px">
-                  <Highlight :keys="item.keys.map((v) => t(v))">
-                    {{ item.type }} : {{ item.title }}
-                  </Highlight>
-                </div>
-                <div class="mt-16px text-12px text-gray-400">
-                  {{ formatTime(item.date, 'yyyy-MM-dd') }}
-                </div>
-              </div>
-            </div>
-            <el-divider />
+          <el-row>
+            <el-col
+              v-for="(item,index) in todo"
+              :key="`card-${index}`"
+            >
+              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;" >* {{item.title}}</span>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+    </el-col>
+    <el-col :xl="6" :lg="6" :md="24" :sm="24" :xs="24" class="mb-8px">
+      <el-card shadow="hover">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">公告</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              target="_blank"
+              style="margin-top: 10px"
+            >
+              更多>>
+            </el-link>
           </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-row>
+            <el-col
+              v-for="(item,index) in todo"
+              :key="`card-${index}`"
+            >
+              <span style="display: inline-block; margin-bottom: 10px;font-size: 15px;color: #105cfb" >* {{item.title}}</span>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+      <el-card shadow="hover" class="mt-8px">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">邮件</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              target="_blank"
+              style="margin-top: 10px"
+            >
+              更多>>
+            </el-link>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-row>
+            <el-table stripe :data="tableData" border style="width: 100%" max-height="300">
+              <el-table-column :formatter="dateFormatter2" prop="Date" label="时间" width="100" />
+              <el-table-column prop="Name" label="发件人" width="70" />
+              <el-table-column
+                prop="Address"
+                label="标题"
+                show-overflow-tooltip
+              />
+            </el-table>
+          </el-row>
+        </el-skeleton>
+      </el-card>
+<!--      <el-card shadow="hover" class="mt-8px">-->
+      <el-card shadow="hover" class="mt-8px">
+        <template #header >
+          <div style="height: 2px;background-color: #ffbd00;margin: 0;padding: 0;"></div>
+          <div class="h-3 flex justify-between" style="height: 15px;margin: 0;padding: 0;">
+            <span style="display: inline-block;">日历</span>
+            <el-link
+              type="primary"
+              :underline="false"
+              target="_blank"
+              style="margin-top: 10px"
+            >
+              更多>>
+            </el-link>
+          </div>
+        </template>
+        <el-skeleton  :loading="loading" animated>
+          <el-calendar ref="calendar" class="custom-calendar">
+            <template #header = "{date}">
+              <el-row>
+                <el-col :span="6">
+                  <span style="display: inline-block;font-size: 10px">{{ date }}</span>
+                </el-col>
+                <el-col :span="18">
+                  <el-button-group style="display: flex; justify-content: space-between;">
+                    <el-button size="small" @click="selectDate('prev-year')">上年</el-button>
+                    <el-button size="small" @click="selectDate('prev-month')">上月</el-button>
+                    <el-button size="small" @click="selectDate('today')">今天</el-button>
+                    <el-button size="small" @click="selectDate('next-year')">下年</el-button>
+                    <el-button size="small" @click="selectDate('next-month')">下月</el-button>
+                  </el-button-group>
+                </el-col>
+              </el-row>
+            </template>
+          </el-calendar>
         </el-skeleton>
       </el-card>
     </el-col>
   </el-row>
 </template>
+<style>
+.custom-calendar {
+  height: 310px; /* 根据需要调整高度 */
+}
+.custom-calendar .el-calendar-table__row {
+   height: 40px; /* 设置行高度，根据需要调整 */
+ }
+.custom-calendar .el-calendar-day {
+  height: 100%; /* 设置每个日历单元格的高度为100% */
+  display: flex; /* 使用 flexbox */
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+}
+.custom-shadow-hover:hover {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4) !important; /* 悬停时更深的阴影 */
+}
+</style>
 <script lang="ts" setup>
+import mn from '../../../src/assets/svgs/login-box-bg.svg'
 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 type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
+import {WorkplaceTotal, Project, Notice, Shortcut, Todo, Email} from './types'
 import { pieOptions, barOptions } from './echarts-data'
+import {formatDate} from "@vueuse/core";
+import {dateFormatter2} from "@/utils/formatTime";
+import {CalendarDateType, CalendarInstance} from "element-plus";
 
 defineOptions({ name: 'Home' })
 
@@ -196,7 +360,25 @@ let totalSate = reactive<WorkplaceTotal>({
   access: 0,
   todo: 0
 })
+const calendar = ref<CalendarInstance>()
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+}
+const handleCarouselChange = async (currentIndex:number) => {
+  pageNo.value=currentIndex+1
 
+}
+const handlePageChange = async (newPage:number) => {
+  const carousel = (document.querySelector('.el-carousel') as any);
+  carousel.setActiveItem(newPage - 1); // 设置轮播显示项与分页同步
+
+}
+const pageNo = ref<number | undefined>(1)
+const image = ref<Array<{ id: number; src: string; name: string; title: string }>>([
+  {id: 1, src: mn, name: '02',title:'首页图片展示标题1'},
+  {id: 2, src: mn, name: '03',title:'首页图片展示标题2'},
+])
 const getCount = async () => {
   const data = {
     project: 40,
@@ -206,6 +388,37 @@ const getCount = async () => {
   totalSate = Object.assign(totalSate, data)
 }
 
+let tableData = reactive<Email[]>([])
+const getTableData = async () => {
+  const data = [
+    {
+      Date:new Date(),
+      Name:'张三',
+      Address:'关于会议的审批关于会议的审批关于会议的',
+    },
+    {
+      Date:new Date(),
+      Name:'李四',
+      Address:'关于会议的审批关于会议的审批关于会议的',
+    },
+    {
+      Date:new Date(),
+      Name:'王二',
+      Address:'关于会议的审批关于会议的审批关于会议的',
+    },
+    {
+      Date:new Date(),
+      Name:'麻子',
+      Address:'关于会议的审批关于会议的审批关于会议的',
+    },
+    {
+      Date:new Date(),
+      Name:'张三',
+      Address:'关于会议的审批关于会议的审批关于会议的',
+    },
+  ]
+  tableData = Object.assign(tableData, data)
+}
 // 获取项目数
 let projects = reactive<Project[]>([])
 const getProject = async () => {
@@ -255,7 +468,49 @@ const getProject = async () => {
   ]
   projects = Object.assign(projects, data)
 }
-
+//获取待办已办信息
+let todo = reactive<Todo[]>([])
+const getTodo = async () => {
+  const data = [
+    {
+      title: '集团政研会六届五次会员大会在贵州遵义召开',
+      type: '请假',
+      content: '',
+      date: new Date()
+    },
+    {
+      title: '总裁在“国际海运(中国)年会2010”发表主旨演讲',
+      type: '任务',
+      content: '',
+      date: new Date()
+    },
+    {
+      title: '(集团)总公司荣获《企业社会责任蓝皮书(2010)》卓越者企业',
+      type: '出差',
+      content: '',
+      date: new Date()
+    },
+    {
+      title: '总裁在“国际海运(中国)年会2010”发表主旨演讲',
+      type: '会议',
+      content: '需要你在某日某月开会',
+      date: new Date()
+    },
+    {
+      title: '集团政研会六届五次会员大会在贵州遵义召开',
+      type: '会议',
+      content: '需要你在某日某月开会',
+      date: new Date()
+    },
+    {
+      title: '(集团)总公司荣获《企业社会责任蓝皮书(2010)》卓越者企业',
+      type: '会议',
+      content: '需要你在某日某月开会',
+      date: new Date()
+    }
+  ]
+  todo = Object.assign(todo, data)
+}
 // 获取通知公告
 let notice = reactive<Notice[]>([])
 const getNotice = async () => {
@@ -377,6 +632,8 @@ const getWeeklyUserActivity = async () => {
 
 const getAllApi = async () => {
   await Promise.all([
+    getTableData(),
+    getTodo(),
     getCount(),
     getProject(),
     getNotice(),
diff --git a/src/views/Home/types.ts b/src/views/Home/types.ts
index e6313d3..d6140de 100644
--- a/src/views/Home/types.ts
+++ b/src/views/Home/types.ts
@@ -4,6 +4,11 @@ export type WorkplaceTotal = {
   todo: number
 }
 
+export type Email = {
+  Date:Date | number | string
+  Name:string
+  Address:string
+}
 export type Project = {
   name: string
   icon: string
@@ -11,7 +16,12 @@ export type Project = {
   personal: string
   time: Date | number | string
 }
-
+export type Todo = {
+  title: string
+  type: string
+  content: string
+  data: Date | number | string
+}
 export type Notice = {
   title: string
   type: string