💄 feat: 图片位置调整

✨ feat: 页面骨架
💥 feat: 更新路由动画
2025-05-11 23:04:22 +08:00 · 2025-05-11 22:17:16 +08:00 · 2025-05-11 21:32:19 +08:00 · 2025-05-11 20:48:41 +08:00 · 2025-04-16 23:11:49 +08:00
107 changed files with 1141 additions and 234 deletions
--- a/.env
+++ b/.env
@ -14,7 +14,7 @@ VITE_APP_URL=http://localhost:8801
 VITE_STRICT_PORT=false

 # 是否启用屏幕转vw适配，可以选择 postcss-px-to-viewport-8-plugin || autofit
-VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit"
+; VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="postcss-px-to-viewport-8-plugin"

 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN=false
--- a/.env.development
+++ b/.env.development
@ -20,8 +20,8 @@ VITE_MOCK_DEV_SERVER=true
 VITE_STRICT_PORT=false

 # 是否启用屏幕转vw适配，可以选择 postcss-px-to-viewport-8-plugin || autofit
-VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit"
-#VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="postcss-px-to-viewport-8-plugin"
+# VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="autofit"
+VITE_POST_CSS_PX_TO_VIEWPORT8_PLUGIN="postcss-px-to-viewport-8-plugin"

 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN=false
--- a/README.md
+++ b/README.md
@ -1,6 +1,4 @@
 # vehicle-monitor

-![大数据可视化蓝色科技智慧车辆大屏后台统计2](public/大数据可视化蓝色科技智慧车辆大屏后台统计2.png)
-
 智慧智能监管中心
 车辆监控中心
--- a/package.json
+++ b/package.json
@ -71,7 +71,7 @@
    "@vue/tsconfig": "^0.7.0",
    "eslint-plugin-simple-import-sort": "^12.1.1",
    "typescript": "~5.7.2",
-    "vite": "^6.1.0",
+    "vite": "6.2.6",
    "vite-plugin-compression": "^0.5.1",
    "vue-tsc": "^2.2.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -31,7 +31,7 @@ importers:
        version: 66.0.0
      '@vitejs/plugin-vue-jsx':
        specifier: ^4.1.1
-        version: 4.1.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+        version: 4.1.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
      '@vueuse/core':
        specifier: ^12.8.2
        version: 12.8.2(typescript@5.7.3)
@ -130,10 +130,10 @@ importers:
        version: 5.39.0
      unocss:
        specifier: ^66.0.0
-        version: 66.0.0(postcss@8.5.3)(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+        version: 66.0.0(postcss@8.5.3)(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
      vite-plugin-cdn-import:
        specifier: ^1.0.1
-        version: 1.0.1(rollup@4.34.8)(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
+        version: 1.0.1(rollup@4.34.8)(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
      vite-plugin-fake-server:
        specifier: ^2.2.0
        version: 2.2.0
@ -142,7 +142,7 @@ importers:
        version: 2.2.0
      vite-plugin-vue-inspector:
        specifier: ^5.3.1
-        version: 5.3.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
+        version: 5.3.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
      vue:
        specifier: ^3.5.13
        version: 3.5.13(typescript@5.7.3)
@ -170,7 +170,7 @@ importers:
        version: 6.9.18
      '@vitejs/plugin-vue':
        specifier: ^5.2.1
-        version: 5.2.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+        version: 5.2.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
      '@vue/tsconfig':
        specifier: ^0.7.0
        version: 0.7.0(typescript@5.7.3)(vue@3.5.13(typescript@5.7.3))
@ -181,11 +181,11 @@ importers:
        specifier: ~5.7.2
        version: 5.7.3
      vite:
-        specifier: ^6.1.0
-        version: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+        specifier: 6.2.6
+        version: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
      vite-plugin-compression:
        specifier: ^0.5.1
-        version: 0.5.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
+        version: 0.5.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
      vue-tsc:
        specifier: ^2.2.0
        version: 2.2.4(typescript@5.7.3)
@ -2686,8 +2686,8 @@ packages:
    peerDependencies:
      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0

-  vite@6.1.1:
-    resolution: {integrity: sha512-4GgM54XrwRfrOp297aIYspIti66k56v16ZnqHvrIM7mG+HjDlAwS7p+Srr7J6fGvEdOJ5JcQ/D9T7HhtdXDTzA==}
+  vite@6.2.6:
+    resolution: {integrity: sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==}
    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
    hasBin: true
    peerDependencies:
@ -3555,13 +3555,13 @@ snapshots:
      '@typescript-eslint/types': 8.24.1
      eslint-visitor-keys: 4.2.0

-  '@unocss/astro@66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/astro@66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
    dependencies:
      '@unocss/core': 66.0.0
      '@unocss/reset': 66.0.0
-      '@unocss/vite': 66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/vite': 66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
    optionalDependencies:
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
    transitivePeerDependencies:
      - vue

@ -3686,7 +3686,7 @@ snapshots:
    dependencies:
      '@unocss/core': 66.0.0

-  '@unocss/vite@66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
+  '@unocss/vite@66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
    dependencies:
      '@ampproject/remapping': 2.3.0
      '@unocss/config': 66.0.0
@ -3696,23 +3696,23 @@ snapshots:
      magic-string: 0.30.17
      tinyglobby: 0.2.12
      unplugin-utils: 0.2.4
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
    transitivePeerDependencies:
      - vue

-  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
    dependencies:
      '@babel/core': 7.26.9
      '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.9)
      '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.9)
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
      vue: 3.5.13(typescript@5.7.3)
    transitivePeerDependencies:
      - supports-color

-  '@vitejs/plugin-vue@5.2.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))':
    dependencies:
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
      vue: 3.5.13(typescript@5.7.3)

  '@volar/language-core@2.4.11':
@ -5272,9 +5272,9 @@ snapshots:

  universalify@2.0.1: {}

-  unocss@66.0.0(postcss@8.5.3)(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3)):
+  unocss@66.0.0(postcss@8.5.3)(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3)):
    dependencies:
-      '@unocss/astro': 66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/astro': 66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
      '@unocss/cli': 66.0.0
      '@unocss/core': 66.0.0
      '@unocss/postcss': 66.0.0(postcss@8.5.3)
@ -5291,9 +5291,9 @@ snapshots:
      '@unocss/transformer-compile-class': 66.0.0
      '@unocss/transformer-directives': 66.0.0
      '@unocss/transformer-variant-group': 66.0.0
-      '@unocss/vite': 66.0.0(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+      '@unocss/vite': 66.0.0(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
    optionalDependencies:
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
    transitivePeerDependencies:
      - postcss
      - supports-color
@ -5316,30 +5316,30 @@ snapshots:

  util-deprecate@1.0.2: {}

-  vite-plugin-cdn-import@1.0.1(rollup@4.34.8)(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
+  vite-plugin-cdn-import@1.0.1(rollup@4.34.8)(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
    dependencies:
      rollup-plugin-external-globals: 0.10.0(rollup@4.34.8)
-      vite-plugin-externals: 0.6.2(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
+      vite-plugin-externals: 0.6.2(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))
    transitivePeerDependencies:
      - rollup
      - vite

-  vite-plugin-compression@0.5.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
+  vite-plugin-compression@0.5.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
    dependencies:
      chalk: 4.1.2
      debug: 4.4.0
      fs-extra: 10.1.0
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
    transitivePeerDependencies:
      - supports-color

-  vite-plugin-externals@0.6.2(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
+  vite-plugin-externals@0.6.2(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
    dependencies:
      acorn: 8.14.0
      es-module-lexer: 0.4.1
      fs-extra: 10.1.0
      magic-string: 0.25.9
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)

  vite-plugin-fake-server@2.2.0:
    dependencies:
@ -5351,7 +5351,7 @@ snapshots:

  vite-plugin-remove-console@2.2.0: {}

-  vite-plugin-vue-inspector@5.3.1(vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
+  vite-plugin-vue-inspector@5.3.1(vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)):
    dependencies:
      '@babel/core': 7.26.9
      '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.9)
@ -5362,13 +5362,13 @@ snapshots:
      '@vue/compiler-dom': 3.5.13
      kolorist: 1.8.0
      magic-string: 0.30.17
-      vite: 6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
+      vite: 6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0)
    transitivePeerDependencies:
      - supports-color

-  vite@6.1.1(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0):
+  vite@6.2.6(@types/node@22.13.10)(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0):
    dependencies:
-      esbuild: 0.24.2
+      esbuild: 0.25.1
      postcss: 8.5.3
      rollup: 4.34.8
    optionalDependencies:
--- a/public/images/bg/bg-layout.png
+++ b/public/images/bg/bg-layout.png
--- a/public/images/bg/bg01.png
+++ b/public/images/bg/bg01.png
--- a/public/images/bg/bg02.png
+++ b/public/images/bg/bg02.png
--- a/public/images/bg/bg03.png
+++ b/public/images/bg/bg03.png
--- a/public/images/bg/bg04.png
+++ b/public/images/bg/bg04.png
--- a/public/images/bg/bg05.png
+++ b/public/images/bg/bg05.png
--- a/public/images/common/bg/bg-layout.png
+++ b/public/images/common/bg/bg-layout.png
--- a/public/images/common/bg/bg-secondary.png
+++ b/public/images/common/bg/bg-secondary.png
--- a/public/大数据可视化蓝色科技智慧车辆大屏后台统计2.png
+++ b/public/大数据可视化蓝色科技智慧车辆大屏后台统计2.png
--- a/src/App.vue
+++ b/src/App.vue
@ -1,11 +1,24 @@
 <template>
  <router-view v-slot="{ Component, route }">
-    <transition :name="route.meta.transition || 'fade-transform'" mode="out-in">
+    <transition
+      :enter-active-class="
+        route.meta.transition?.enter
+          ? `animate__animated ${route.meta.transition.enter}`
+          : 'animate__animated animate__fadeInLeft animate__faster'
+      "
+      :leave-active-class="
+        route.meta.transition?.leave
+          ? `animate__animated ${route.meta.transition.leave}`
+          : 'animate__animated animate__fadeOutLeft animate__faster'
+      "
+      mode="out-in"
+    >
      <component :is="Component" :key="route.path" />
    </transition>
  </router-view>
 </template>

+<script lang="ts" setup></script>
 <style lang="scss">
 #app {
  width: 100%;
--- a/src/assets/images/common/header/bg-layout-header.png
+++ b/src/assets/images/common/header/bg-layout-header.png
--- a/src/assets/images/welcome/bg/bg-particle.png
+++ b/src/assets/images/welcome/bg/bg-particle.png
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@ -3,6 +3,7 @@

 :root {
  --color-primary: #027AFF;
+  --color-primary-1: #4F94E6;
  --color-primary-secondary: #00FFFF;
  --color-primary-secondary-1: #00FFFFB5;
  --color-success: #44D7B6;
--- a/src/components/CommonHeader/LayoutHeader.vue
+++ b/src/components/CommonHeader/LayoutHeader.vue
@ -1,9 +1,8 @@
 <script lang="ts" setup>
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';

 import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';

-const router = useRouter();
 const route = useRoute();
 </script>

--- a/src/components/PanelItem/CommunityPanel/bg.png
+++ b/src/components/PanelItem/CommunityPanel/bg.png
--- a/src/components/PanelItem/CommunityPanel/index.vue
+++ b/src/components/PanelItem/CommunityPanel/index.vue
@ -0,0 +1,41 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="panel">
+    <h1>{{ title }}</h1>
+
+    <div class="panel-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.panel {
+  width: 430px;
+  height: 440px;
+  background: url('./bg.png') no-repeat;
+  background-size: cover;
+
+  h1 {
+    color: var(--color-primary-1);
+    font-size: 20px;
+    text-align: center;
+    line-height: 85px;
+  }
+
+  &-body {
+    display: flex;
+    justify-self: center;
+    width: 368px;
+    height: 314px;
+  }
+}
+</style>
--- a/src/components/PanelItem/PanelTitle/PanelTitle1.vue
+++ b/src/components/PanelItem/PanelTitle/PanelTitle1.vue
@ -0,0 +1,39 @@
+<script lang="ts" setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+
+<style lang="scss" scoped>
+h1 {
+  position: relative;
+  line-height: 40px;
+  font-size: 20px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: 2px;
+    background: #707070;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 38%;
+    height: 2px;
+    background: var(--color-primary-secondary);
+  }
+}
+</style>
--- a/src/components/PanelItem/Progress/Progress1.vue
+++ b/src/components/PanelItem/Progress/Progress1.vue
@ -0,0 +1,27 @@
+<script lang="ts" setup>
+defineProps({
+  progress: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
+
+<template>
+  <div class="progress">
+    <div :style="{ width: `${progress}%` }" class="progress-inner" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.progress {
+  width: 100%;
+  height: 11px;
+  border: 1px solid var(--color-primary-secondary);
+
+  &-inner {
+    height: 100%;
+    background: var(--color-primary);
+  }
+}
+</style>
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@ -1,18 +1,17 @@
 <script lang="ts" setup>
 import { onBeforeMount } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';

 import CommonHeader from '@/components/CommonHeader/CommonHeader.vue';
 import LayoutHeader from '@/components/CommonHeader/LayoutHeader.vue';
 import { HeaderTypeEnum } from '@/enums/HeaderTypeEnum';
 import { useAppStore } from '@/store/app';

-const router = useRouter();
 const route = useRoute();
 const appStore = useAppStore();

 onBeforeMount(() => {
-  appStore.setBackground('/images/common/bg/bg-layout.png');
+  appStore.setBackground('/images/bg/bg-layout.png');
 });
 </script>

--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@ -4,23 +4,58 @@ import type { RouteConfigsTable } from '@/types/router/Route';
 const routes: RouteConfigsTable[] = [
  {
    path: '/welcome',
-    name: 'welcome',
+    name: 'Welcome',
    component: () => import('@/views/welcome/index.vue'),
-    meta: { transition: 'fade', title: '后台管理系统大标题', headerType: HeaderTypeEnum.default },
+    meta: {
+      title: '后台管理系统标题',
+      headerType: HeaderTypeEnum.default,
+    },
  },
  {
    path: '/smart-park',
-    name: 'smartPark',
+    name: 'SmartPark',
    component: () => import('@/views/smart-park/index.vue'),
    meta: {
      title: '智慧智能监管中心',
      subtitle: '车辆监控中心',
      headerType: HeaderTypeEnum.subtitle,
+      transition: {
+        enter: 'animate__bounceInUp animate__faster',
+        leave: 'animate__bounceOutUp',
+      },
+    },
+  },
+  {
+    path: '/data-analyse',
+    name: 'DataAnalyse',
+    component: () => import('@/views/data-analyse/index.vue'),
+    meta: {
+      title: '数据分析',
+      subtitle: '数据分析中心',
+      headerType: HeaderTypeEnum.subtitle,
+      transition: {
+        enter: 'animate__bounceIn animate__faster',
+        leave: 'animate__bounceOut',
+      },
+    },
+  },
+  {
+    path: '/community',
+    name: 'Community',
+    component: () => import('@/views/community/index.vue'),
+    meta: {
+      title: '社区',
+      subtitle: '社区可视化中心',
+      headerType: HeaderTypeEnum.subtitle,
+      transition: {
+        enter: 'animate__bounceIn animate__faster',
+        leave: 'animate__bounceOut',
+      },
    },
  },
  {
    path: '/business-supervision',
-    name: 'businessSupervision',
+    name: 'BusinessSupervision',
    component: () => import('@/views/business-supervision/index.vue'),
    meta: {
      title: '智慧经营监管中心',
@ -30,7 +65,7 @@ const routes: RouteConfigsTable[] = [
  },
  {
    path: '/big-data',
-    name: 'bigData',
+    name: 'BigData',
    component: () => import('@/views/big-data/index.vue'),
    meta: {
      title: '大数据可视化中心',
--- a/src/store/app.ts
+++ b/src/store/app.ts
@ -5,7 +5,7 @@ import { isCSSColor, isPath } from '@/utils/regexp/regexpBackground';
 const useAppStore = defineStore('appStore', {
  state() {
    return {
-      background: '',
+      background: '/images/bg/bg-layout.png',
    };
  },
  getters: {},
@ -17,7 +17,7 @@ const useAppStore = defineStore('appStore', {
        const href = new URL(background, import.meta.url).href;
        this.background = `url(${href})`;
      } else {
-        const href = new URL('/images/common/bg/bg-layout.png', import.meta.url).href;
+        const href = new URL('/images/bg/bg-layout.png', import.meta.url).href;
        this.background = `url(${href})`;
      }
    },
--- a/src/types/router.d.ts
+++ b/src/types/router.d.ts
@ -0,0 +1,11 @@
+// types/router.d.ts
+import 'vue-router';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    transition?: {
+      enter: string;
+      leave: string;
+    };
+  }
+}
--- a/src/types/router/Route.ts
+++ b/src/types/router/Route.ts
@ -1,12 +1,20 @@
 import type { RouteComponent } from 'vue-router';

+/**
+ * @description 动画入场和离场
+ */
+interface Transition {
+  enter?: string;
+  leave?: string;
+}
+
 /**
 * @description 完整子路由的`meta`配置表
 */
 interface CustomizeRouteMeta {
  title?: string;
  subtitle?: string;
-  transition?: string;
+  transition?: Transition;
  hidden?: boolean;
  /* 头部类型 */
  headerType?: any;
--- a/src/utils/copy.ts
+++ b/src/utils/copy.ts
@ -0,0 +1,24 @@
+/**
+ * 复制到剪切板
+ * @param text 文本内容
+ */
+export const copy = (text: string) => {
+  const textarea = document.createElement('textarea');
+  textarea.value = text;
+  textarea.style.position = 'fixed';
+  document.body.appendChild(textarea);
+  textarea.select();
+
+  try {
+    const success = document.execCommand('copy');
+    if (success) {
+      (window as any as any).$message.success('复制成功！');
+    } else {
+      (window as any).$message.success('复制失败！');
+    }
+  } catch (err: any) {
+    (window as any).$message.success('复制失败！请手动复制');
+  } finally {
+    document.body.removeChild(textarea);
+  }
+};
--- a/src/utils/file.ts
+++ b/src/utils/file.ts
@ -0,0 +1,45 @@
+export function downloadTextAsFile(text: string, filename: string) {
+  // 直接创建 File 对象（比 Blob 更高级）
+  const file = new File([text], filename, { type: 'text/plain' });
+
+  // 创建下载链接
+  const url = URL.createObjectURL(file);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+
+  // 触发下载
+  document.body.appendChild(a);
+  a.click();
+
+  // 清理
+  requestIdleCallback(() => {
+    document.body.removeChild(a);
+    URL.revokeObjectURL(a.href);
+  });
+}
+
+export const downloadBlob = (response: any) => {
+  try {
+    // 从响应头获取文件名
+    const contentDisposition = response.headers['content-disposition'];
+    let fileName = 'download.zip';
+    if (contentDisposition) {
+      const fileNameMatch = contentDisposition.match(/filename="?(.+)"/);
+      if (fileNameMatch && fileNameMatch[1]) {
+        fileName = fileNameMatch[1];
+      }
+    }
+
+    const url = window.URL.createObjectURL(new Blob([response.data]));
+    const link = document.createElement('a');
+    link.href = url;
+    link.setAttribute('download', fileName);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    window.URL.revokeObjectURL(url);
+  } catch (error) {
+    console.error(error);
+  }
+};
--- a/src/views/big-data/components/big-data-content/components/content-middle.vue
+++ b/src/views/big-data/components/big-data-content/components/content-middle.vue
@ -21,7 +21,7 @@ onMounted(() => {
      <img
        :class="[isActive ? 'move-top' : 'move-bottom']"
        alt=""
-        src="@/assets/images/big-data/bg/bg-middle-move.png"
+        src="@/views/big-data/images/bg-middle-move.png"
      />

      <h1>工作台</h1>
@ -29,7 +29,7 @@ onMounted(() => {
      <img
        :class="[isActive ? 'move-bottom' : 'move-top']"
        alt=""
-        src="@/assets/images/big-data/bg/bg-middle-move.png"
+        src="@/views/big-data/images/bg-middle-move.png"
      />
    </div>
  </div>
@ -57,7 +57,7 @@ onMounted(() => {
    line-height: 109px;
    font-size: 34px;
    color: var(--color-primary-secondary);
-    background: url('@/assets/images/big-data/bg/bg-middle-title.png') no-repeat center;
+    background: url('@/views/big-data/images/bg-middle-title.png') no-repeat center;
    background-size: cover;
  }

--- a/src/views/big-data/components/big-data-content/components/content-top.vue
+++ b/src/views/big-data/components/big-data-content/components/content-top.vue
@ -47,7 +47,7 @@ ul {
      line-height: 54px;
      text-align: center;
      color: var(--color-primary-secondary);
-      background: url('@/assets/images/big-data/bg/bg-content-top-item.png') no-repeat center;
+      background: url('@/views/big-data/images/bg-content-top-item.png') no-repeat center;
      background-size: cover;
    }
  }
--- a/src/views/big-data/components/big-data-left/components/left-bottom.vue
+++ b/src/views/big-data/components/big-data-left/components/left-bottom.vue
@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import { onMounted, ref } from 'vue';

 import { renderEcharts, updateChart } from '@/views/big-data/charts/left-bottom';

 const chart = ref<HTMLDivElement>();
-const timer = ref(null);

+/* 随机数据 */
 const randomData = () => {
  function random() {
    return Array(12)
@ -21,18 +22,18 @@ const randomData = () => {
  updateChart(data);
 };

+/* 模拟数据 */
+const mockRandomData = () => {
+  useIntervalFn(() => {
+    randomData();
+  }, 1000);
+};
+
 onMounted(() => {
  renderEcharts(chart);
  randomData();

-  timer.value = setInterval(() => {
-    randomData();
-  }, 6000);
-});
-
-onUnmounted(() => {
-  clearInterval(timer.value);
-  timer.value = null;
+  mockRandomData();
 });
 </script>

--- a/src/views/big-data/components/big-data-left/components/left-middle.vue
+++ b/src/views/big-data/components/big-data-left/components/left-middle.vue
@ -1,10 +1,10 @@
 <script lang="tsx" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import { onMounted, ref } from 'vue';

 import { formatter } from '@/utils/chart';
 import { ChartProgress } from '@/views/big-data/charts/left-middle';

-const timer = ref(null);
 const randomNumber = (range: number = 100) => {
  return parseInt((Math.random() * range).toFixed(0));
 };
@ -34,8 +34,8 @@ const renderItem = () => {
  );
 };

-onMounted(() => {
-  timer.value = setInterval(() => {
+const mockList = () => {
+  useIntervalFn(() => {
    list.value = [
      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
@ -43,11 +43,10 @@ onMounted(() => {
      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
    ];
  }, 1000);
-});
+};

-onUnmounted(() => {
-  clearInterval(timer.value);
-  timer.value = null;
+onMounted(() => {
+  mockList();
 });
 </script>

@ -83,7 +82,7 @@ li {
  padding: 0 18px 0 14px;
  width: 248px;
  height: 143px;
-  background: url('@/assets/images/big-data/bg/bg-middle.png') no-repeat center;
+  background: url('@/views/big-data/images/bg-middle.png') no-repeat center;
  background-size: cover;

  .progress {
--- a/src/views/big-data/components/big-data-right/components/right-bottom.vue
+++ b/src/views/big-data/components/big-data-right/components/right-bottom.vue
@ -49,7 +49,7 @@ li {
  margin: 0 24px 14px 0;
  width: 144px;
  height: 83px;
-  background: url('@/assets/images/big-data/bg/bg-right-bottom.png') no-repeat center;
+  background: url('@/views/big-data/images/bg-right-bottom.png') no-repeat center;
  background-size: cover;

  &::before {
--- a/src/views/big-data/components/big-data-right/index.vue
+++ b/src/views/big-data/components/big-data-right/index.vue
@ -11,5 +11,3 @@ import RightTop from '@/views/big-data/components/big-data-right/components/righ
    <right-bottom />
  </div>
 </template>
-
-<style lang="scss" scoped></style>
--- a/src/assets/images/big-data/bg/bg-content-top-item.png
+++ b/src/assets/images/big-data/bg/bg-content-top-item.png
--- a/src/assets/images/big-data/bg/bg-middle-move.png
+++ b/src/assets/images/big-data/bg/bg-middle-move.png
--- a/src/assets/images/big-data/bg/bg-middle-title.png
+++ b/src/assets/images/big-data/bg/bg-middle-title.png
--- a/src/assets/images/big-data/bg/bg-middle.png
+++ b/src/assets/images/big-data/bg/bg-middle.png
--- a/src/assets/images/big-data/bg/bg-right-bottom.png
+++ b/src/assets/images/big-data/bg/bg-right-bottom.png
--- a/src/assets/images/big-data/bg/bg-right-top-1.png
+++ b/src/assets/images/big-data/bg/bg-right-top-1.png
--- a/src/views/big-data/index.vue
+++ b/src/views/big-data/index.vue
@ -9,7 +9,7 @@ import BigDataRight from '@/views/big-data/components/big-data-right/index.vue';
 const appStore = useAppStore();

 onBeforeMount(async () => {
-  appStore.setBackground('/images/common/bg/bg-secondary.png');
+  appStore.setBackground('/images/bg/bg03.png');
 });
 </script>

--- a/src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue
+++ b/src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue
@ -39,7 +39,7 @@ onMounted(() => {
  margin: 20px 0 0 0;
  width: 761px;
  height: 294px;
-  background: url('@/assets/images/business-supervision/bg/content/bg-bottom.png') no-repeat center;
+  background: url('@/views/business-supervision/images/content/bg-bottom.png') no-repeat center;
  background-size: cover;

  &-inner {
--- a/src/views/business-supervision/components/business-supervision-content/components/content-middle.vue
+++ b/src/views/business-supervision/components/business-supervision-content/components/content-middle.vue
@ -52,7 +52,7 @@ const getImage = (url) => {
  margin: 30px 0 0 0;
  width: 761px;
  height: 407px;
-  background: url('@/assets/images/business-supervision/bg/content/bg-middle.png') no-repeat center;
+  background: url('@/views/business-supervision/images/content/bg-middle.png') no-repeat center;
  background-size: cover;

  li {
@ -76,7 +76,7 @@ const getImage = (url) => {
      text-align: center;
      line-height: 40px;
      color: var(--color-primary-secondary);
-      background: url('@/assets/images/business-supervision/bg/content/bg-middle-tag.png') no-repeat
+      background: url('@/views/business-supervision/images/content/bg-middle-tag.png') no-repeat
        center;
      background-size: cover;
    }
@ -89,8 +89,8 @@ const getImage = (url) => {
    align-items: center;
    width: 140px;
    height: 99px;
-    background: url('@/assets/images/business-supervision/bg/content/bg-middle-detail.png')
-      no-repeat center;
+    background: url('@/views/business-supervision/images/content/bg-middle-detail.png') no-repeat
+      center;
    background-size: cover;

    strong {
--- a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-bottom.vue
+++ b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-bottom.vue
@ -60,7 +60,7 @@ const devices = ref<any>([
    justify-content: center;
    width: 74px;
    height: 46px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/device-carriage.png') no-repeat
+    background: url('@/views/business-supervision/images/sidebar/device-carriage.png') no-repeat
      center;
    background-size: cover;

--- a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue
+++ b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue
@ -75,7 +75,7 @@ onMounted(() => {
    margin: 15px 0 0 0;
    width: 242px;
    height: 124px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
+    background: url('@/views/business-supervision/images/sidebar/frame-1.png') no-repeat center;
    background-size: cover;

    h1 {
--- a/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue
+++ b/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue
@ -72,7 +72,7 @@ onMounted(() => {
      align-items: center;
      width: 240px;
      height: 167px;
-      background: url('@/assets/images/business-supervision/bg/sidebar/bg-sidebar-bottom-panel.png')
+      background: url('@/views/business-supervision/images/sidebar/bg-sidebar-bottom-panel.png')
        no-repeat center;
      background-size: cover;

--- a/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-middle.vue
+++ b/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-middle.vue
@ -47,8 +47,8 @@ const list = [
      padding: 0 0 0 14px;
      width: 243px;
      height: 124px;
-      background: url('@/assets/images/business-supervision/bg/sidebar/bg-sidebar-panel.png')
-        no-repeat center;
+      background: url('@/views/business-supervision/images/sidebar/bg-sidebar-panel.png') no-repeat
+        center;
      background-size: cover;

      h1 {
--- a/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue
+++ b/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue
@ -32,26 +32,17 @@ const timeList = ref<TimeSelectType[]>([
      <ul class="business-supervision__sidebar-list">
        <li>
          <h1>$ 1.62</h1>
-          <img
-            alt=""
-            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
-          />
+          <img alt="" src="@/views/business-supervision/images/sidebar/bg-middle-coordinate.png" />
          <p>批准规划面积验收率</p>
        </li>
        <li>
          <h1>$ 1.62</h1>
-          <img
-            alt=""
-            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
-          />
+          <img alt="" src="@/views/business-supervision/images/sidebar/bg-middle-coordinate.png" />
          <p>批准规划面积验收率</p>
        </li>
        <li>
          <h1>$ 1.62</h1>
-          <img
-            alt=""
-            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
-          />
+          <img alt="" src="@/views/business-supervision/images/sidebar/bg-middle-coordinate.png" />
          <p>批准规划面积验收率</p>
        </li>
      </ul>
@ -71,7 +62,7 @@ const timeList = ref<TimeSelectType[]>([
  &--spin {
    width: 167px;
    height: 167px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/bg-middle-spin.png') no-repeat
+    background: url('@/views/business-supervision/images/sidebar/bg-middle-spin.png') no-repeat
      center;
    background-size: cover;
    animation: rotate 2s linear infinite;
--- a/src/assets/images/business-supervision/bg/content/bg-bottom.png
+++ b/src/assets/images/business-supervision/bg/content/bg-bottom.png
--- a/src/assets/images/business-supervision/bg/content/bg-middle-detail.png
+++ b/src/assets/images/business-supervision/bg/content/bg-middle-detail.png
--- a/src/assets/images/business-supervision/bg/content/bg-middle-tag.png
+++ b/src/assets/images/business-supervision/bg/content/bg-middle-tag.png
--- a/src/assets/images/business-supervision/bg/content/bg-middle.png
+++ b/src/assets/images/business-supervision/bg/content/bg-middle.png
--- a/src/assets/images/business-supervision/bg/sidebar/bg-frame-4.png
+++ b/src/assets/images/business-supervision/bg/sidebar/bg-frame-4.png
--- a/src/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png
+++ b/src/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png
--- a/src/assets/images/business-supervision/bg/sidebar/bg-middle-spin.png
+++ b/src/assets/images/business-supervision/bg/sidebar/bg-middle-spin.png
--- a/src/assets/images/business-supervision/bg/sidebar/bg-sidebar-bottom-panel.png
+++ b/src/assets/images/business-supervision/bg/sidebar/bg-sidebar-bottom-panel.png
--- a/src/assets/images/business-supervision/bg/sidebar/bg-sidebar-panel.png
+++ b/src/assets/images/business-supervision/bg/sidebar/bg-sidebar-panel.png
--- a/src/assets/images/business-supervision/bg/sidebar/device-carriage.png
+++ b/src/assets/images/business-supervision/bg/sidebar/device-carriage.png
--- a/src/assets/images/business-supervision/bg/sidebar/frame-1.png
+++ b/src/assets/images/business-supervision/bg/sidebar/frame-1.png
--- a/src/views/business-supervision/index.vue
+++ b/src/views/business-supervision/index.vue
@ -9,7 +9,7 @@ import BusinessSupervisionRight from '@/views/business-supervision/components/bu
 const appStore = useAppStore();

 onBeforeMount(() => {
-  appStore.setBackground('/images/common/bg/bg-secondary.png');
+  appStore.setBackground('/images/bg/bg02.png');
 });
 </script>

--- a/src/views/community/community-content/index.vue
+++ b/src/views/community/community-content/index.vue
@ -0,0 +1,11 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="community__content">community-content/index.vue</div>
+</template>
+
+<style lang="scss" scoped>
+.community__content {
+  background: #006bc5;
+}
+</style>
--- a/src/views/community/community-left/index.vue
+++ b/src/views/community/community-left/index.vue
@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import CommunityPanel from '@/components/PanelItem/CommunityPanel/index.vue';
+</script>
+
+<template>
+  <div class="community__sidebar">
+    <div class="community__sidebar-item">
+      <CommunityPanel title="智慧设备总数" />
+    </div>
+
+    <div class="community__sidebar-item">
+      <CommunityPanel title="预警概览" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.community__sidebar {
+  //background: #fff;
+}
+</style>
--- a/src/views/community/community-right/index.vue
+++ b/src/views/community/community-right/index.vue
@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import CommunityPanel from '@/components/PanelItem/CommunityPanel/index.vue';
+</script>
+
+<template>
+  <div class="community__sidebar">
+    <div class="community__sidebar-item">
+      <CommunityPanel title="标题标题" />
+    </div>
+
+    <div class="community__sidebar-item">
+      <CommunityPanel title="标题标题" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.community__sidebar {
+}
+</style>
--- a/src/views/community/index.vue
+++ b/src/views/community/index.vue
@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import CommunityContent from '@/views/community/community-content/index.vue';
+import CommunityLeft from '@/views/community/community-left/index.vue';
+import CommunityRight from '@/views/community/community-right/index.vue';
+</script>
+
+<template>
+  <div class="community">
+    <community-left />
+    <community-content />
+    <community-right />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.community {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  @include view-style-default(530px, 759px, #0e5fff33);
+}
+</style>
--- a/src/views/data-analyse/charts/content-footer.ts
+++ b/src/views/data-analyse/charts/content-footer.ts
@ -0,0 +1,132 @@
+import type { Ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
+
+let myChart = null;
+
+const option = {
+  grid: {
+    left: '4%',
+    right: '4%',
+    bottom: '19%',
+    top: '20%',
+    containLabel: true,
+  },
+  title: {
+    text: '单位：(万元)',
+    textStyle: {
+      color: 'rgba(131, 162, 192, 1)',
+      fontSize: 12,
+    },
+    top: '4%',
+    left: '2%',
+  },
+  tooltip: {
+    trigger: 'axis',
+  },
+  legend: {
+    data: ['增加值'],
+    icon: 'rich',
+    show: true,
+    itemWidth: 18,
+    itemHeight: 2,
+    textStyle: {
+      color: '#AFBDD1',
+      fontSize: '12px',
+    },
+    top: 8,
+    right: 10,
+    itemGap: 34,
+  },
+
+  xAxis: {
+    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+    type: 'category',
+    boundaryGap: false,
+    axisLine: {
+      symbol: 'none',
+      lineStyle: {
+        color: '#50637A',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLabel: {
+      interval: 0,
+      color: '#6071A9',
+      fontSize: 12,
+      padding: [10, 0, 0, 0],
+    },
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      color: '#6071A9',
+      fontSize: 12,
+      padding: [0, 10, 0, 0],
+    },
+    splitLine: {
+      lineStyle: {
+        color: '#50637A',
+        type: 'dashed',
+      },
+    },
+  },
+  series: [
+    {
+      name: '增加值',
+      data: [1, 2, 3, 4, 7, 6, 7, 8, 4, 10],
+      type: 'line',
+      smooth: true,
+      color: '#00F7FF',
+      lineStyle: {
+        width: 2,
+      },
+      areaStyle: {
+        color: new echarts.graphic.LinearGradient(
+          0,
+          0,
+          0,
+          1,
+          [
+            {
+              offset: 0,
+              color: 'rgba(0, 247, 255, .6)',
+            },
+            {
+              offset: 0.8,
+              color: 'rgba(0, 247, 255, .2)',
+            },
+          ],
+          false
+        ),
+        shadowColor: 'rgba(0, 0, 0, 0.1)',
+        shadowBlur: 10,
+      },
+      symbol: 'circle',
+      symbolSize: 6,
+    },
+  ],
+};
+
+/** 渲染图表 */
+export const renderFooterChart = (element: Ref<HTMLDivElement>) => {
+  myChart = echarts.init(element.value, null, {
+    renderer: 'canvas',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  debounceChart(myChart);
+
+  myChart.setOption(option);
+};
+
+/** 更新图表数据 */
+export const updateChart = (option: Array<Array<number>>) => {
+  const series = myChart.getOption().series;
+  // series[0].data = option[0];
+  // series[1].data = option[1];
+  myChart.setOption({ series });
+};
--- a/src/views/data-analyse/charts/left-brand.ts
+++ b/src/views/data-analyse/charts/left-brand.ts
@ -0,0 +1,65 @@
+import 'echarts/lib/component/dataZoom';
+
+import type { Ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
+
+let myChart = null;
+
+const option = {
+  tooltip: { trigger: 'item' },
+  legend: {
+    top: 'bottom',
+    data: ['品牌A', '品牌B', '品牌C', '品牌D', '品牌E', '品牌F'],
+  },
+  series: [
+    {
+      name: '品牌占比',
+      type: 'pie',
+      radius: [25, 100],
+      center: ['50%', '45%'],
+      roseType: 'area',
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      },
+      label: {
+        formatter: '{b}: {c}%',
+      },
+      data: [
+        { value: 10.89, name: '品牌A' },
+        { value: 30.89, name: '品牌B' },
+        { value: 38.38, name: '品牌C' },
+        { value: 27.47, name: '品牌D' },
+        { value: 29.79, name: '品牌E' },
+        { value: 50, name: '品牌F' },
+        { value: 50, name: '品牌G' },
+        { value: 39.72, name: '品牌H' },
+      ],
+    },
+  ],
+};
+
+/** 渲染图表 */
+export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+  myChart = echarts.init(element.value, null, {
+    renderer: 'canvas',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  debounceChart(myChart);
+
+  myChart.setOption(option);
+};
+
+/** 更新图表数据 */
+export const updateChart = (option: Array<Array<number>>) => {
+  const series = myChart.getOption().series;
+  // series[0].data = option[0];
+  // series[1].data = option[1];
+  myChart.setOption({ series });
+};
--- a/src/views/data-analyse/charts/right-body.ts
+++ b/src/views/data-analyse/charts/right-body.ts
@ -0,0 +1,28 @@
+import type { Ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
+
+let myChart = null;
+
+const option = {};
+
+/** 渲染图表 */
+export const renderBodyChart = (element: Ref<HTMLDivElement>) => {
+  myChart = echarts.init(element.value, null, {
+    renderer: 'canvas',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  debounceChart(myChart);
+
+  myChart.setOption(option);
+};
+
+/** 更新图表数据 */
+export const updateChart = (option: Array<Array<number>>) => {
+  const series = myChart.getOption().series;
+  // series[0].data = option[0];
+  // series[1].data = option[1];
+  myChart.setOption({ series });
+};
--- a/src/views/data-analyse/charts/right-footer.ts
+++ b/src/views/data-analyse/charts/right-footer.ts
@ -0,0 +1,36 @@
+import type { Ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
+
+let myChart = null;
+const data = [
+  { name: '张三', value: 88 },
+  { name: '李四', value: 250 },
+  { name: '王五', value: 5438 },
+  { name: '赵六', value: 8848 },
+  { name: '陈七', value: 9527 },
+  { name: '朱八', value: 10086 },
+];
+
+const option = {};
+
+/** 渲染图表 */
+export const renderFooterChart = (element: Ref<HTMLDivElement>) => {
+  myChart = echarts.init(element.value, null, {
+    renderer: 'canvas',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  debounceChart(myChart);
+
+  myChart.setOption(option);
+};
+
+/** 更新图表数据 */
+export const updateChart = (option: Array<Array<number>>) => {
+  const series = myChart.getOption().series;
+  // series[0].data = option[0];
+  // series[1].data = option[1];
+  myChart.setOption({ series });
+};
--- a/src/views/data-analyse/components/data-analyse-content/index.vue
+++ b/src/views/data-analyse/components/data-analyse-content/index.vue
@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import PanelTitle1 from '@/components/PanelItem/PanelTitle/PanelTitle1.vue';
+import { renderFooterChart } from '@/views/data-analyse/charts/content-footer';
+
+const titleList = [170582, 586220, 168902];
+
+const footerChartRef = ref();
+
+const footerChart = () => {
+  renderFooterChart(footerChartRef);
+};
+
+onMounted(() => {
+  footerChart();
+});
+</script>
+
+<template>
+  <div class="data-analyse-content">
+    <ul class="data-analyse-content__header">
+      <li v-for="(item, index) in titleList" :key="index">
+        <h3>数据展示</h3>
+        <strong>{{ item }}</strong>
+        <span>台</span>
+      </li>
+    </ul>
+
+    <main class="data-analyse-content__body">body</main>
+
+    <footer class="data-analyse-content__footer">
+      <PanelTitle1 title="销售设备数量区域占比" />
+      <div ref="footerChartRef" class="data-analyse-content__footer-chart" />
+    </footer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse-content {
+  margin: 0 35px;
+  width: 803px;
+  height: 970px;
+
+  h1 {
+    color: white;
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    margin: 15px 0 0 0;
+
+    h3 {
+      color: #94ddff;
+      font-size: 18px;
+    }
+
+    strong {
+      color: #fff;
+      font-size: 36px;
+    }
+
+    span {
+      margin: 0 0 0 8px;
+      color: #fff;
+      font-size: 16px;
+    }
+  }
+
+  &__body {
+    margin: 14px 0 0 0;
+    width: 100%;
+    height: 567px;
+  }
+
+  &__footer {
+    margin: 6px 0 0 0;
+    width: 100%;
+    height: 284px;
+
+    &-chart {
+      width: 100%;
+      height: 275px;
+    }
+  }
+}
+</style>
--- a/src/views/data-analyse/components/data-analyse-left/index.vue
+++ b/src/views/data-analyse/components/data-analyse-left/index.vue
@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import PanelTitle1 from '@/components/PanelItem/PanelTitle/PanelTitle1.vue';
+import Progress1 from '@/components/PanelItem/Progress/Progress1.vue';
+import { renderEcharts } from '@/views/data-analyse/charts/left-brand';
+
+const brandChartRef = ref();
+const deviceTotal = ref('1010');
+
+const companyList = [
+  { name: '科技有限公司', amount: 18888, percent: '40' },
+  { name: '科技有限公司', amount: 18888, percent: '50' },
+  { name: '科技有限公司', amount: 18888, percent: '10' },
+  { name: '科技有限公司', amount: 18888, percent: '80' },
+  { name: '科技有限公司', amount: 18888, percent: '50' },
+];
+
+onMounted(() => {
+  renderEcharts(brandChartRef);
+});
+</script>
+
+<template>
+  <!--顶部-->
+  <div class="data-analyse-left">
+    <div class="data-analyse-left__top">
+      <div>
+        <h1 class="font-size-[21px]">销售设备总量(台)</h1>
+        <div class="data-analyse-left__top-percent">
+          <span>环比去年增长 52%</span>
+          <i class="i-mdi-trending-up">s</i>
+        </div>
+      </div>
+
+      <ul class="flex">
+        <li v-for="(num, index) in deviceTotal" :key="index">{{ num }}</li>
+      </ul>
+    </div>
+
+    <!--中心区域-->
+    <div class="data-analyse-left__center">
+      <PanelTitle1 title="销售公司销售设备数量占比" />
+
+      <ul>
+        <li v-for="(item, index) in companyList" :key="index">
+          <div class="data-analyse-left__center-info">
+            <span>{{ item.name }}</span>
+            <div class="info-left">
+              <span class="mr-[14px]">{{ item.amount }}台</span>
+              <span class="mr-[9px] c-primary-secondary">环比 {{ item.percent }} %</span>
+              <i class="i-mdi-trending-up" />
+            </div>
+          </div>
+          <Progress1 :progress="parseInt(item.percent)" />
+        </li>
+      </ul>
+    </div>
+
+    <!--底部区域-->
+    <div class="data-analyse-left__bottom">
+      <PanelTitle1 title="品牌占有率" />
+
+      <div ref="brandChartRef" class="data-analyse-left__bottom-chart" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse-left {
+  width: 496px;
+  height: 970px;
+  color: white;
+
+  /* 顶部 */
+  &__top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 496px;
+    height: 100px;
+
+    &-percent {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: var(--color-primary-secondary);
+      font-size: 16px;
+
+      span {
+        font-size: 18px;
+      }
+
+      i {
+        font-size: 21px;
+      }
+    }
+
+    li {
+      margin: 0 4px;
+      width: 56px;
+      height: 53px;
+      line-height: 53px;
+      text-align: center;
+      font-size: 47px;
+      border: 1px solid var(--color-primary-secondary);
+      background-color: rgba(39, 63, 86, 0.34);
+    }
+  }
+
+  /* 中心区域 */
+  &__center {
+    margin: 47px 0 0 0;
+
+    li {
+      margin: 0 0 27px 0;
+
+      &:nth-child(1) {
+        margin: 35px 0 27px 0;
+      }
+    }
+
+    &-info {
+      display: flex;
+      justify-content: space-between;
+
+      .info-left {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        i {
+          color: var(--color-primary-secondary);
+        }
+      }
+    }
+  }
+
+  /* 底部区域 */
+  &__bottom {
+    margin: 25px 0 0 0;
+    width: 468px;
+    height: 387px;
+
+    &-chart {
+      margin: 0 0 25px 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
--- a/src/views/data-analyse/components/data-analyse-right/index.vue
+++ b/src/views/data-analyse/components/data-analyse-right/index.vue
@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import PanelTitle1 from '@/components/PanelItem/PanelTitle/PanelTitle1.vue';
+import { renderBodyChart } from '@/views/data-analyse/charts/right-body';
+import { renderFooterChart } from '@/views/data-analyse/charts/right-footer';
+
+const footerChartRef = ref();
+const footerChart = () => {
+  renderFooterChart(footerChartRef);
+};
+
+const bodyChartRef = ref();
+const bodyChart = () => {
+  renderBodyChart(bodyChartRef);
+};
+
+onMounted(() => {
+  bodyChart();
+  footerChart();
+});
+</script>
+
+<template>
+  <div class="data-analyse-right">
+    <header class="data-analyse-right__header">
+      <PanelTitle1 title="数据占有率" />
+      <div ref="bodyChartRef" class="data-analyse-right-chart" />
+    </header>
+
+    <main class="data-analyse-right__body">
+      <PanelTitle1 title="数据分析展示" />
+      <div ref="bodyChartRef" class="data-analyse-right__body-chart" />
+    </main>
+
+    <footer class="data-analyse-right__footer">
+      <PanelTitle1 title="数据展示统计" />
+
+      <div ref="footerChartRef" class="data-analyse-right__footer-chart" />
+    </footer>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse-right {
+  width: 496px;
+  height: 970px;
+
+  h1 {
+    color: #fff;
+  }
+
+  &__header {
+    margin: 10px 0 0 0;
+    width: 100%;
+    height: 305px;
+  }
+
+  &__body {
+    margin: 10px;
+    width: 100%;
+    height: 350px;
+
+    &-chart {
+      width: 100%;
+      height: 320px;
+    }
+  }
+
+  &__footer {
+    margin: 10px 0 0 0;
+    width: 100%;
+    height: 257px;
+
+    &-chart {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>
--- a/src/views/data-analyse/index.vue
+++ b/src/views/data-analyse/index.vue
@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import { onBeforeMount } from 'vue';
+
+import { useAppStore } from '@/store/app';
+import DataAnalyseContent from '@/views/data-analyse/components/data-analyse-content/index.vue';
+import DataAnalyseLeft from '@/views/data-analyse/components/data-analyse-left/index.vue';
+import DataAnalyseRight from '@/views/data-analyse/components/data-analyse-right/index.vue';
+
+const appStore = useAppStore();
+
+onBeforeMount(() => {
+  appStore.setBackground('/images/bg/bg05.png');
+});
+</script>
+
+<template>
+  <div class="data-analyse">
+    <data-analyse-left />
+    <data-analyse-content />
+    <data-analyse-right />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.data-analyse {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/assets/images/login/bg-login-btn.png
+++ b/src/assets/images/login/bg-login-btn.png
--- a/src/assets/images/login/bg-login.png
+++ b/src/assets/images/login/bg-login.png
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -109,7 +109,7 @@ onBeforeMount(() => {
      align-items: center;
      width: 749px;
      height: 578px;
-      background: url('@/assets/images/login/bg-login.png') no-repeat center;
+      background: url('@/views/login/images/bg-login.png') no-repeat center;
      background-size: cover;

      &-info {
@ -154,7 +154,7 @@ onBeforeMount(() => {
          font-size: 16px;
          color: var(--color-primary-secondary);
          outline: none;
-          background: url('@/assets/images/login/bg-login-btn.png') no-repeat center;
+          background: url('@/views/login/images/bg-login-btn.png') no-repeat center;
          background-size: cover;
        }
      }
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue
+++ b/src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue
@ -15,7 +15,7 @@ defineProps({
      <img
        alt="arrow-item"
        class="float-left h-[16px]"
-        src="@/assets/images/smart-park/arrow/arrow-item.png"
+        src="@/views/smart-park/images/arrow/arrow-item.png"
      />
    </div>
  </div>
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-percent.vue
+++ b/src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-percent.vue
@ -3,8 +3,8 @@ defineProps({
  percent: Number,
 });

-import ArrowDown from '@/assets/images/smart-park/arrow/arrow-down.png';
-import ArrowUp from '@/assets/images/smart-park/arrow/arrow-up.png';
+import ArrowDown from '@/views/smart-park/images/arrow/arrow-down.png';
+import ArrowUp from '@/views/smart-park/images/arrow/arrow-up.png';

 const calPercentItem = (percent: number): Element => {
  return percent > 25 ? (
@ -35,7 +35,7 @@ const calPercentItem = (percent: number): Element => {
  position: absolute;
  width: 86px;
  height: 86px;
-  background: url('@/assets/images/common/bg/bg-main-2.png') no-repeat center;
+  background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
  background-size: cover;
 }
 </style>
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue
+++ b/src/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue
@ -46,13 +46,13 @@ import ContentPercent from '@/views/smart-park/components/smart-park-content/com
  align-items: center;
  width: 824px;
  height: 650px;
-  background: url('@/assets/images/smart-park/bg/bg-middle.png') no-repeat center;
+  background: url('@/views/smart-park/images/bg/bg-middle.png') no-repeat center;
  background-size: cover;

  // 中间部分标题
  &-title {
    height: 61px;
-    background: url('@/assets/images/smart-park/bg/bg-main-title.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-main-title.png') no-repeat center;
    background-size: cover;

    h1 {
@ -71,7 +71,7 @@ import ContentPercent from '@/views/smart-park/components/smart-park-content/com
    margin: 28px 0 77px 0;
    width: 666px;
    height: 400px;
-    background: url('@/assets/images/smart-park/bg/bg-main-1.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
    background-size: cover;
  }

@ -87,7 +87,7 @@ import ContentPercent from '@/views/smart-park/components/smart-park-content/com
    &-headline {
      width: 100%;
      height: 100%;
-      background: url('@/assets/images/smart-park/bg/bg-main-center.png');
+      background: url('@/views/smart-park/images/bg/bg-main-center.png');
      background-size: cover;
      font-size: 19px;
      animation: rotate 30s linear infinite;
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue
+++ b/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue
@ -11,22 +11,22 @@
      <!-- 汽车列表 -->
      <ul class="mt-[32px]">
        <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
          <p>入卡口（西北门）</p>
          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
        </li>
        <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
          <p>入卡口（东北门）</p>
          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
        </li>
        <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/assets/images/smart-park/car/car-2.png" />
+          <img alt="car-1" src="@/views/smart-park/images/car/car-2.png" />
          <p>入卡口（东北门）</p>
          <span class="dashed-circle c-warning border-b-warning">拥堵</span>
        </li>
        <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="@/assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="@/views/smart-park/images/car/car-1.png" />
          <p>入卡口（东南门）</p>
          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
        </li>
@ -57,7 +57,7 @@
    width: 330px;
    height: 61px;
    margin: 0 0 9px 0;
-    background: url('@/assets/images/smart-park/bg/bg-frame.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-frame.png') no-repeat center;
    background-size: cover;

    img {
@ -77,7 +77,7 @@
    height: 157px;
    color: #fff;
    font-size: 14px;
-    background: url('@/assets/images/smart-park/bg/bg-suggest.png') no-repeat center;
+    background: url('@/views/smart-park/images/bg/bg-suggest.png') no-repeat center;
    background-size: cover;

    span {
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue
+++ b/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue
@ -1,100 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue';
-
-import { renderEcharts, updateChart } from '@/views/smart-park/charts/right-sidebar';
-
-const weekDataChart = ref<HTMLDivElement>();
-
-const timer = ref(null);
-
-/** 随机数据 */
-const randomData = () => {
-  function random() {
-    return Array(11)
-      .fill(0)
-      .map(() => {
-        const num = (Math.random() * 100).toFixed(2);
-        return parseInt(num);
-      });
-  }
-
-  timer.value = setInterval(() => {
-    updateChart({ data1: random(), data2: random() });
-  }, 1000);
-};
-
-onMounted(() => {
-  renderEcharts(weekDataChart);
-  randomData();
-});
-
-onUnmounted(() => {
-  clearInterval(timer.value);
-  timer.value = null;
-});
-</script>
-
-<template>
-  <div class="smart-park__sidebar ml-[20px]">
-    <div class="pt-[55px] pl-[25px]">
-      <!-- 路况 -->
-      <div class="smart-park__sidebar-title">
-        <h1>近7天车流量概览</h1>
-      </div>
-
-      <!-- 汽车列表 -->
-      <ul class="flex-x-around mt-[32px] w-[331px]">
-        <li class="smart-park__sidebar-flow-item">
-          <span>最高进园车流量</span>
-          <span>897</span>
-        </li>
-        <li class="smart-park__sidebar-flow-item">
-          <span>最高进园车流量</span>
-          <span>494</span>
-        </li>
-      </ul>
-
-      <!-- 七天数据 -->
-      <div class="w-[325px] h-[205px]">
-        <div ref="weekDataChart" class="smart-park__sidebar-charts" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.smart-park__sidebar-flow-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 162px;
-  height: 111px;
-  text-align: center;
-
-  span:nth-child(1) {
-    width: 161px;
-    height: 40px;
-    color: #fff;
-    line-height: 40px;
-    font-size: 16px;
-    background: url('@/assets/images/smart-park/bg/bg-frame-2.png') no-repeat center;
-    background-size: cover;
-  }
-
-  span:nth-child(2) {
-    width: 161px;
-    height: 66px;
-    color: var(--color-primary-secondary);
-    line-height: 66px;
-    font-size: 34px;
-    background: url('@/assets/images/smart-park/bg/bg-frame-3.png') no-repeat center;
-    background-size: cover;
-  }
-}
-
-.smart-park__sidebar-charts {
-  margin: 71px 0 0 0;
-  width: 100%;
-  height: 100%;
-}
-</style>
--- a/src/views/smart-park/components/smart-park-content/index.vue
+++ b/src/views/smart-park/components/smart-park-content/index.vue
@ -1,13 +1,100 @@
 <script lang="ts" setup>
+import { useIntervalFn } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
+
+import { renderEcharts, updateChart } from '@/views/smart-park/charts/right-sidebar';
 import SmartPartContent from '@/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue';
 import SmartPartSidebarLeft from '@/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue';
-import SmartPartSidebarRight from '@/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue';
+
+const weekDataChart = ref<HTMLDivElement>();
+
+/** 随机数据 */
+const randomData = () => {
+  renderEcharts(weekDataChart);
+
+  function random() {
+    return Array(11)
+      .fill(0)
+      .map(() => {
+        const num = (Math.random() * 100).toFixed(2);
+        return parseInt(num);
+      });
+  }
+
+  useIntervalFn(() => {
+    updateChart({ data1: random(), data2: random() });
+  }, 1000);
+};
+
+onMounted(() => {
+  randomData();
+});
 </script>

 <template>
  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
    <smart-part-sidebar-left />
    <smart-part-content />
-    <smart-part-sidebar-right />
+    <div class="smart-park__sidebar ml-[20px]">
+      <div class="pt-[55px] pl-[25px]">
+        <!-- 路况 -->
+        <div class="smart-park__sidebar-title">
+          <h1>近7天车流量概览</h1>
+        </div>
+
+        <!-- 汽车列表 -->
+        <ul class="flex-x-around mt-[32px] w-[331px]">
+          <li class="smart-park__sidebar-flow-item">
+            <span>最高进园车流量</span>
+            <span>897</span>
+          </li>
+          <li class="smart-park__sidebar-flow-item">
+            <span>最高进园车流量</span>
+            <span>494</span>
+          </li>
+        </ul>
+
+        <!-- 七天数据 -->
+        <div class="w-[325px] h-[205px]">
+          <div ref="weekDataChart" class="smart-park__sidebar-flow-item-charts" />
+        </div>
+      </div>
+    </div>
  </main>
 </template>
+<style lang="scss" scoped>
+.smart-park__sidebar-flow-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 162px;
+  height: 111px;
+  text-align: center;
+
+  span:nth-child(1) {
+    width: 161px;
+    height: 40px;
+    color: #fff;
+    line-height: 40px;
+    font-size: 16px;
+    background: url('@/views/smart-park/images/bg/bg-frame-2.png') no-repeat center;
+    background-size: cover;
+  }
+
+  span:nth-child(2) {
+    width: 161px;
+    height: 66px;
+    color: var(--color-primary-secondary);
+    line-height: 66px;
+    font-size: 34px;
+    background: url('@/views/smart-park/images/bg/bg-frame-3.png') no-repeat center;
+    background-size: cover;
+  }
+
+  &-charts {
+    margin: 71px 0 0 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
--- a/src/views/smart-park/components/smart-park-footer/index.vue
+++ b/src/views/smart-park/components/smart-park-footer/index.vue
@ -4,7 +4,7 @@
  <footer>
    <ul class="smart-park__footer-nav">
      <li v-for="index in new Array(5)" :key="index" class="smart-park__footer-item">
-        <img alt="车辆管理" src="../../../../assets/images/smart-park/car/car-39.png" />
+        <img alt="车辆管理" src="@/views/smart-park/images/car/car-39.png" />
        <span class="text-white hover">车辆管理</span>
      </li>
    </ul>
--- a/src/assets/images/smart-park/arrow/arrow-down.png
+++ b/src/assets/images/smart-park/arrow/arrow-down.png
--- a/src/assets/images/smart-park/arrow/arrow-item.png
+++ b/src/assets/images/smart-park/arrow/arrow-item.png
--- a/src/assets/images/smart-park/arrow/arrow-left.png
+++ b/src/assets/images/smart-park/arrow/arrow-left.png
--- a/src/assets/images/smart-park/arrow/arrow-right.png
+++ b/src/assets/images/smart-park/arrow/arrow-right.png
--- a/src/assets/images/smart-park/arrow/arrow-up.png
+++ b/src/assets/images/smart-park/arrow/arrow-up.png
--- a/src/assets/images/smart-park/bg/bg-frame-2.png
+++ b/src/assets/images/smart-park/bg/bg-frame-2.png
--- a/src/assets/images/smart-park/bg/bg-frame-3.png
+++ b/src/assets/images/smart-park/bg/bg-frame-3.png
--- a/src/assets/images/smart-park/bg/bg-frame.png
+++ b/src/assets/images/smart-park/bg/bg-frame.png
--- a/src/assets/images/smart-park/bg/bg-main-1.png
+++ b/src/assets/images/smart-park/bg/bg-main-1.png
--- a/src/assets/images/smart-park/bg/bg-main-center.png
+++ b/src/assets/images/smart-park/bg/bg-main-center.png
--- a/src/assets/images/smart-park/bg/bg-main-title.png
+++ b/src/assets/images/smart-park/bg/bg-main-title.png
--- a/src/assets/images/smart-park/bg/bg-middle.png
+++ b/src/assets/images/smart-park/bg/bg-middle.png
--- a/src/assets/images/smart-park/bg/bg-road-condition.png
+++ b/src/assets/images/smart-park/bg/bg-road-condition.png
--- a/src/assets/images/smart-park/bg/bg-side.png
+++ b/src/assets/images/smart-park/bg/bg-side.png
--- a/src/assets/images/smart-park/bg/bg-suggest.png
+++ b/src/assets/images/smart-park/bg/bg-suggest.png
--- a/src/assets/images/smart-park/car/car-1.png
+++ b/src/assets/images/smart-park/car/car-1.png
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
bunny	a697e2e87d	💄 feat: 图片位置调整	2025-05-11 23:04:22 +08:00
bunny	61bbf51282	✨ feat: 页面骨架	2025-05-11 22:17:16 +08:00
bunny	637fc4a614	💥 feat: 更新路由动画	2025-05-11 21:32:19 +08:00
bunny	8ca95304c1	✨ feat: 数据分析-基础骨架	2025-05-11 20:48:41 +08:00
bunny	68ebd4b72f	feat: 数据分析-左边开始	2025-04-16 23:11:49 +08:00