diff --git a/index.html b/index.html
index a8bba25..e51dde7 100644
--- a/index.html
+++ b/index.html
@@ -3,9 +3,9 @@
 
 <head>
   <meta charset="UTF-8" />
-  <link rel="icon" href="./src/image/票据服务.png" type="image/x-icon">
+  <link rel="icon" href="./src/assets/objectNetwork.png" type="image/x-icon">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>票据管理系统</title>
+  <title>物联网网关系统</title>
 </head>
 
 <body>
diff --git a/src/components/navbar/index.vue b/src/components/navbar/index.vue
index 4e90c5a..9e894e6 100644
--- a/src/components/navbar/index.vue
+++ b/src/components/navbar/index.vue
@@ -2,17 +2,13 @@
   <div class="navbar">
     <div class="left-side">
       <a-space>
-        <img style="height: 24px" alt="logo" src="../../image/票据服务.png" />
+        <img style="height: 24px" alt="logo" src="../../assets/objectNetwork.png" />
         <a-typography-title
           :style="{ margin: 0, fontSize: '18px' }"
           :heading="5"
-          @click="
-            {
-              router.push({ name: 'Workplace' });
-            }
-          "
+          @click="$router.push({ name: 'Workplace' })"
         >
-          {{ $t('ticket.manage.system') }}
+          物联网网关系统
         </a-typography-title>
         <icon-menu-fold
           v-if="!topMenu && appStore.device === 'mobile'"
@@ -26,21 +22,47 @@
     </div>
     <ul class="right-side">
       <li>
-        <a-tooltip content="消息中心">
+        <a-tooltip content="公告通知">
           <a-button
             class="nav-btn"
             type="outline"
             :shape="'circle'"
-            @click="$router.push({ name: 'notice' })"
+            @click="$router.push({ name: 'Bulletins' })"
           >
             <template #icon>
-              <a-badge :count="9" dot :offset="[2, -2]">
-                <icon-message />
-              </a-badge>
+              <icon-message />
             </template>
+
           </a-button>
         </a-tooltip>
       </li>
+      <li>
+        <a-tooltip content="消息通知">
+          <div class="message-box-trigger">
+            <a-badge :count="9" dot>
+              <a-button
+                class="nav-btn"
+                type="outline"
+                :shape="'circle'"
+                @click="setPopoverVisible"
+              >
+                <icon-notification />
+              </a-button>
+            </a-badge>
+          </div>
+        </a-tooltip>
+        <a-popover
+          trigger="click"
+          :arrow-style="{ display: 'none' }"
+          :content-style="{ padding: 0, minWidth: '400px' }"
+          content-class="message-popover"
+        >
+          <div ref="refBtn" class="ref-btn"></div>
+          <template #content>
+            <message-box />
+          </template>
+        </a-popover>
+      </li>
       <li>
         <a-tooltip :content="$t('settings.language')">
           <a-button
@@ -133,9 +155,6 @@
       </li>
       <li>
         <a-dropdown trigger="click">
-          <a-button style="margin-right: 20px" status="normal">{{
-            userStore.nickName
-          }}</a-button>
           <a-avatar
             :size="32"
             :style="{ marginRight: '8px', cursor: 'pointer' }"
@@ -145,7 +164,6 @@
               alt="avatar"
               :src="'/api/rest/attachment/' + avatar"
             />
-            <img v-else :src="userIcon" alt="" />
           </a-avatar>
           <template #content>
             <a-doption>
@@ -182,6 +200,7 @@ import Menu from '@/components/menu/index.vue';
 import userIcon from '@/assets/images/user-circle.png';
 import { useRouter } from 'vue-router';
 import { clearToken } from '@/utils/auth';
+import messageBox from '@/components/message-box/index.vue';
 
 const router = useRouter();
 const appStore = useAppStore();
@@ -208,8 +227,16 @@ const isDark = useDark({
     appStore.toggleTheme(dark);
   },
 });
+const refBtn = ref();
 const toggleTheme = useToggle(isDark);
-
+const setPopoverVisible = () => {
+  const event = new MouseEvent('click', {
+    view: window,
+    bubbles: true,
+    cancelable: true,
+  });
+  refBtn.value.dispatchEvent(event);
+};
 const handleToggleTheme = () => {
   toggleTheme();
 };
diff --git a/src/views/dashboard/workplace/components/banner.vue b/src/views/dashboard/workplace/components/banner.vue
index 2aac36b..00b5534 100644
--- a/src/views/dashboard/workplace/components/banner.vue
+++ b/src/views/dashboard/workplace/components/banner.vue
@@ -10,26 +10,26 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { useUserStore } from '@/store';
+  import { computed } from 'vue';
+  import { useUserStore } from '@/store';
 
-const userStore = useUserStore();
-const userInfo = computed(() => {
-  return {
-    name: userStore.username,
-  };
-});
+  const userStore = useUserStore();
+  const userInfo = computed(() => {
+    return {
+      name: userStore.name,
+    };
+  });
 </script>
 
 <style scoped lang="less">
-.banner {
-  width: 100%;
-  padding: 20px 20px 0 20px;
-  background-color: var(--color-bg-2);
-  border-radius: 4px 4px 0 0;
-}
+  .banner {
+    width: 100%;
+    padding: 20px 20px 0 20px;
+    background-color: var(--color-bg-2);
+    border-radius: 4px 4px 0 0;
+  }
 
-:deep(.arco-icon-home) {
-  margin-right: 6px;
-}
+  :deep(.arco-icon-home) {
+    margin-right: 6px;
+  }
 </style>
diff --git a/src/views/dashboard/workplace/components/data-panel.vue b/src/views/dashboard/workplace/components/data-panel.vue
index b96dc8b..43d8999 100644
--- a/src/views/dashboard/workplace/components/data-panel.vue
+++ b/src/views/dashboard/workplace/components/data-panel.vue
@@ -1,238 +1,131 @@
 <template>
-  <div style="width: 100%">
-    <a-grid :cols="24" :row-gap="16" class="panel">
-      <a-grid-item
-        class="panel-col"
-        :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
-      >
-        <a-space @click="to('PASS')">
-          <a-avatar :size="54" class="col-avatar">
-            <img
-              alt="avatar"
-              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
-            />
-          </a-avatar>
-          <a-statistic
-            :title="$t('workplace.pass')"
-            :value="formData.pass || 0"
-            :value-from="0"
-            show-group-separator
-          >
-            <template #suffix>
-              <span class="unit">{{ $t('workplace.pecs') }}</span>
-            </template>
-          </a-statistic>
-        </a-space>
-      </a-grid-item>
-      <a-grid-item
-        class="panel-col"
-        :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
-      >
-        <a-space @click="to('FAILED')">
-          <a-avatar :size="54" class="col-avatar">
-            <img
-              alt="avatar"
-              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
-            />
-          </a-avatar>
-          <a-statistic
-            :title="$t('workplace.notPass')"
-            :value="formData.notPass || 0"
-            :value-from="0"
-            show-group-separator
-          >
-            <template #suffix>
-              <span class="unit">{{ $t('workplace.pecs') }}</span>
-            </template>
-          </a-statistic>
-        </a-space>
-      </a-grid-item>
-      <a-grid-item
-        class="panel-col"
-        :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
-      >
-        <a-space @click="to('EXAMINE')">
-          <a-avatar :size="54" class="col-avatar">
-            <img
-              alt="avatar"
-              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
-            />
-          </a-avatar>
-          <a-statistic
-            :title="$t('workplace.notAudit')"
-            :value="formData.notAudit || 0"
-            :value-from="0"
-            show-group-separator
-          >
-            <template #suffix>
-              <span class="unit">{{ $t('workplace.pecs') }}</span>
-            </template>
-          </a-statistic>
-        </a-space>
-      </a-grid-item>
-      <a-grid-item
-        v-if="userStore.permissions !== 'auditor'"
-        class="panel-col"
-        :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
-        style="border-right: none"
-      >
-        <a-space @click="to('SUBMIT')">
-          <a-avatar :size="54" class="col-avatar">
-            <img
-              alt="avatar"
-              src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
-            />
-          </a-avatar>
-          <a-statistic
-            v-model="formData.notFiled"
-            :title="$t('workplace.notFiled')"
-            :value="formData.notFiled || 0"
-            :value-from="0"
-            show-group-separator
-          >
-            <template #suffix>
-              <span class="unit">{{ $t('workplace.pecs') }}</span>
-            </template>
-          </a-statistic>
-        </a-space>
-      </a-grid-item>
-      <a-grid-item :span="24">
-        <a-divider class="panel-border" />
-      </a-grid-item>
-    </a-grid>
-    <a-card :bordered="false">
-      <a-space id="TicketEcharts" style="width: 98%; height: 400px"></a-space>
-    </a-card>
-  </div>
+  <a-grid :cols="24" :row-gap="16" class="panel">
+    <a-grid-item
+      class="panel-col"
+      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
+    >
+      <a-space>
+        <a-avatar :size="54" class="col-avatar">
+          <img
+            alt="avatar"
+            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
+          />
+        </a-avatar>
+        <a-statistic
+          :title="$t('workplace.onlineContent')"
+          :value="373.5"
+          :precision="1"
+          :value-from="0"
+          animation
+          show-group-separator
+        >
+          <template #suffix>
+            W+ <span class="unit">{{ $t('workplace.pecs') }}</span>
+          </template>
+        </a-statistic>
+      </a-space>
+    </a-grid-item>
+    <a-grid-item
+      class="panel-col"
+      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
+    >
+      <a-space>
+        <a-avatar :size="54" class="col-avatar">
+          <img
+            alt="avatar"
+            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
+          />
+        </a-avatar>
+        <a-statistic
+          :title="$t('workplace.putIn')"
+          :value="368"
+          :value-from="0"
+          animation
+          show-group-separator
+        >
+          <template #suffix>
+            <span class="unit">{{ $t('workplace.pecs') }}</span>
+          </template>
+        </a-statistic>
+      </a-space>
+    </a-grid-item>
+    <a-grid-item
+      class="panel-col"
+      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
+    >
+      <a-space>
+        <a-avatar :size="54" class="col-avatar">
+          <img
+            alt="avatar"
+            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
+          />
+        </a-avatar>
+        <a-statistic
+          :title="$t('workplace.newDay')"
+          :value="8874"
+          :value-from="0"
+          animation
+          show-group-separator
+        >
+          <template #suffix>
+            <span class="unit">{{ $t('workplace.pecs') }}</span>
+          </template>
+        </a-statistic>
+      </a-space>
+    </a-grid-item>
+    <a-grid-item
+      class="panel-col"
+      :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
+      style="border-right: none"
+    >
+      <a-space>
+        <a-avatar :size="54" class="col-avatar">
+          <img
+            alt="avatar"
+            src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
+          />
+        </a-avatar>
+        <a-statistic
+          :title="$t('workplace.newFromYesterday')"
+          :value="2.8"
+          :precision="1"
+          :value-from="0"
+          animation
+        >
+          <template #suffix> % <icon-caret-up class="up-icon" /> </template>
+        </a-statistic>
+      </a-space>
+    </a-grid-item>
+    <a-grid-item :span="24">
+      <a-divider class="panel-border" />
+    </a-grid-item>
+  </a-grid>
 </template>
 
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
-import { useTicketStore, useUserStore } from '@/store';
-import { onMounted, ref } from 'vue';
-import * as echarts from 'echarts';
-import router from '@/router';
-
-const { t } = useI18n();
-const ticketStore = useTicketStore();
-const userStore = useUserStore();
-const formData = ref({
-  notAudit: undefined,
-  notFiled: undefined,
-  notPass: undefined,
-  pass: undefined,
-});
-
-onMounted(async () => {
-  const res = await ticketStore.getChart();
-  type EChartsOption = echarts.EChartsOption;
-  const chartDom = document.getElementById('TicketEcharts');
-  const myChart = echarts.init(chartDom);
-  const option = {
-    title: {
-      text: t('workplace.chart'),
-    },
-    tooltip: {
-      trigger: 'axis',
-    },
-    legend: {
-      data: [
-        t('workplace.pass'),
-        t('workplace.notPass'),
-        t('workplace.notAudit'),
-      ],
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true,
-    },
-    toolbox: {
-      feature: {
-        saveAsImage: {},
-      },
-    },
-    xAxis: {
-      type: 'category',
-      boundaryGap: false,
-      data: res.data.dates,
-    },
-    yAxis: {
-      type: 'value',
-    },
-    series: [
-      {
-        name: t('workplace.pass'),
-        type: 'line',
-        data: res.data.status2Counts,
-      },
-      {
-        name: t('workplace.notPass'),
-        type: 'line',
-        data: res.data.status3Counts,
-      },
-      {
-        name: t('workplace.notAudit'),
-        type: 'line',
-        data: res.data.status1Counts,
-      },
-    ],
-  };
-
-  myChart.setOption(option);
-});
-
-const getHomeData = async (params: {
-  auditorId: number | undefined;
-  userId: number | string | undefined;
-}) => {
-  if (userStore.permissions === 'admin') {
-    params.userId = '';
-  } else if (userStore.permissions === 'auditor') {
-    params.auditorId = userStore.id;
-  } else if (userStore.permissions === 'user') {
-    params.userId = userStore.id;
-  }
-
-  ticketStore.getHome(params).then((res) => {
-    formData.value = res.data;
-  });
-};
-
-const to = (key: string) => {
-  router.push({
-    name: 'TicketManage',
-    query: {
-      status: key,
-    },
-  });
-};
-getHomeData({});
-</script>
+<script lang="ts" setup></script>
 
 <style lang="less" scoped>
-.arco-grid.panel {
-  margin-bottom: 0;
-  padding: 16px 20px 0 20px;
-}
-.panel-col {
-  padding-left: 43px;
-  border-right: 1px solid rgb(var(--gray-2));
-}
-.col-avatar {
-  margin-right: 12px;
-  background-color: var(--color-fill-2);
-}
-.up-icon {
-  color: rgb(var(--red-6));
-}
-.unit {
-  margin-left: 8px;
-  color: rgb(var(--gray-8));
-  font-size: 12px;
-}
-:deep(.panel-border) {
-  margin: 4px 0 0 0;
-}
+  .arco-grid.panel {
+    margin-bottom: 0;
+    padding: 16px 20px 0 20px;
+  }
+  .panel-col {
+    padding-left: 43px;
+    border-right: 1px solid rgb(var(--gray-2));
+  }
+  .col-avatar {
+    margin-right: 12px;
+    background-color: var(--color-fill-2);
+  }
+  .up-icon {
+    color: rgb(var(--red-6));
+  }
+  .unit {
+    margin-left: 8px;
+    color: rgb(var(--gray-8));
+    font-size: 12px;
+  }
+  :deep(.panel-border) {
+    margin: 4px 0 0 0;
+  }
 </style>
diff --git a/src/views/dashboard/workplace/index.vue b/src/views/dashboard/workplace/index.vue
index 2eb930a..2cce702 100644
--- a/src/views/dashboard/workplace/index.vue
+++ b/src/views/dashboard/workplace/index.vue
@@ -1,105 +1,138 @@
 <template>
   <div class="container">
     <div class="left-side">
-      <div class="panel"> <Banner /> <DataPanel /></div>
+      <div class="panel">
+        <Banner />
+        <DataPanel />
+      </div>
+      <a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">
+        <a-grid-item
+          :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
+        >
+        </a-grid-item>
+        <a-grid-item
+          :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
+        >
+        </a-grid-item>
+      </a-grid>
+    </div>
+    <div class="right-side">
+      <a-grid :cols="24" :row-gap="16">
+        <a-grid-item :span="24">
+          <div class="panel moduler-wrap">
+            <QuickOperation />
+            <RecentlyVisited />
+          </div>
+        </a-grid-item>
+        <a-grid-item class="panel" :span="24">
+        </a-grid-item>
+        <a-grid-item class="panel" :span="24">
+          <Announcement />
+        </a-grid-item>
+        <a-grid-item class="panel" :span="24">
+        </a-grid-item>
+      </a-grid>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import Banner from './components/banner.vue';
-import DataPanel from './components/data-panel.vue';
+  import Banner from './components/banner.vue';
+  import DataPanel from './components/data-panel.vue';
+  import RecentlyVisited from './components/recently-visited.vue';
+  import QuickOperation from './components/quick-operation.vue';
+  import Announcement from './components/announcement.vue';
 </script>
 
 <script lang="ts">
-export default {
-  name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
-};
+  export default {
+    name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
+  };
 </script>
 
 <style lang="less" scoped>
-.container {
-  background-color: var(--color-fill-2);
-  padding: 16px 20px;
-  padding-bottom: 0;
-  display: flex;
-}
-
-.left-side {
-  flex: 1;
-  overflow: auto;
-}
-
-.right-side {
-  width: 280px;
-  margin-left: 16px;
-}
-
-.panel {
-  background-color: var(--color-bg-2);
-  border-radius: 4px;
-  overflow: auto;
-}
-:deep(.panel-border) {
-  margin-bottom: 0;
-  border-bottom: 1px solid rgb(var(--gray-2));
-}
-.moduler-wrap {
-  border-radius: 4px;
-  background-color: var(--color-bg-2);
-  :deep(.text) {
-    font-size: 12px;
-    text-align: center;
-    color: rgb(var(--gray-8));
+  .container {
+    background-color: var(--color-fill-2);
+    padding: 16px 20px;
+    padding-bottom: 0;
+    display: flex;
   }
 
-  :deep(.wrapper) {
-    margin-bottom: 8px;
-    text-align: center;
-    cursor: pointer;
-
-    &:last-child {
-      .text {
-        margin-bottom: 0;
-      }
-    }
-    &:hover {
-      .icon {
-        color: rgb(var(--arcoblue-6));
-        background-color: #e8f3ff;
-      }
-      .text {
-        color: rgb(var(--arcoblue-6));
-      }
-    }
+  .left-side {
+    flex: 1;
+    overflow: auto;
   }
 
-  :deep(.icon) {
-    display: inline-block;
-    width: 32px;
-    height: 32px;
-    margin-bottom: 4px;
-    color: rgb(var(--dark-gray-1));
-    line-height: 32px;
-    font-size: 16px;
-    text-align: center;
-    background-color: rgb(var(--gray-1));
+  .right-side {
+    width: 280px;
+    margin-left: 16px;
+  }
+
+  .panel {
+    background-color: var(--color-bg-2);
     border-radius: 4px;
+    overflow: auto;
+  }
+  :deep(.panel-border) {
+    margin-bottom: 0;
+    border-bottom: 1px solid rgb(var(--gray-2));
+  }
+  .moduler-wrap {
+    border-radius: 4px;
+    background-color: var(--color-bg-2);
+    :deep(.text) {
+      font-size: 12px;
+      text-align: center;
+      color: rgb(var(--gray-8));
+    }
+
+    :deep(.wrapper) {
+      margin-bottom: 8px;
+      text-align: center;
+      cursor: pointer;
+
+      &:last-child {
+        .text {
+          margin-bottom: 0;
+        }
+      }
+      &:hover {
+        .icon {
+          color: rgb(var(--arcoblue-6));
+          background-color: #e8f3ff;
+        }
+        .text {
+          color: rgb(var(--arcoblue-6));
+        }
+      }
+    }
+
+    :deep(.icon) {
+      display: inline-block;
+      width: 32px;
+      height: 32px;
+      margin-bottom: 4px;
+      color: rgb(var(--dark-gray-1));
+      line-height: 32px;
+      font-size: 16px;
+      text-align: center;
+      background-color: rgb(var(--gray-1));
+      border-radius: 4px;
+    }
   }
-}
 </style>
 
 <style lang="less" scoped>
-// responsive
-.mobile {
-  .container {
-    display: block;
+  // responsive
+  .mobile {
+    .container {
+      display: block;
+    }
+    .right-side {
+      // display: none;
+      width: 100%;
+      margin-left: 0;
+      margin-top: 16px;
+    }
   }
-  .right-side {
-    // display: none;
-    width: 100%;
-    margin-left: 0;
-    margin-top: 16px;
-  }
-}
 </style>
