♻️ feat: 大数据模块重构

src/App.vue

@@ -22,7 +22,7 @@
 <style lang="scss">
 #app {
   width: 100%;
-  //height: 1080px;
-  height: 100%;
+  height: 1080px;
+  //height: 100%;
 }
 </style>

src/layout/index.vue

@@ -2,9 +2,9 @@
 import { onBeforeMount } from 'vue';
 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 LayoutHeaderCommon from '@/layout/layout-header/components/LayoutHeaderCommon.vue';
+import LayoutHeaderHome from '@/layout/layout-header/components/LayoutHeaderHome.vue';
 import { useAppStore } from '@/store/app';
 
 const route = useRoute();
@@ -17,9 +17,9 @@ onBeforeMount(() => {
 
 <template>
   <div :style="{ background: appStore.background }" class="layout-container">
-    <layout-header v-if="route.meta.headerType === HeaderTypeEnum.default" />
-    <common-header v-else-if="route.meta.headerType === 'subtitle'" />
-    <common-header v-else />
+    <layout-header-home v-if="route.meta.headerType === HeaderTypeEnum.default" />
+    <layout-header-common v-else-if="route.meta.headerType === 'subtitle'" />
+    <layout-header-common v-else />
 
     <main>
       <router-view />

src/layout/layout-header/components/LayoutHeaderCommon.vue

@@ -2,7 +2,7 @@
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';
+import LayoutHeaderNav from '@/layout/layout-header/components/LayoutHeaderNav.vue';
 import dayjs from '@/plugins/dayjs';
 import { resetRouter } from '@/router';
 
@@ -34,13 +34,13 @@ onMounted(() => {
       <img
         alt="icon-setting"
         class="ml-[-284px]"
-        src="@/assets/images/common/icon/icon-home.png"
+        src="../images/icon/icon-home.png"
         @click="resetRouter()"
       />
-      <img alt="icon-home" class="ml-[284px]" src="@/assets/images/common/icon/icon-setting.png" />
+      <img alt="icon-home" class="ml-[284px]" src="../images/icon/icon-setting.png" />
     </div>
 
-    <BarOp />
+    <LayoutHeaderNav />
   </header>
 </template>
 
@@ -48,7 +48,7 @@ onMounted(() => {
 header {
   position: relative;
   height: 108px;
-  background: url('@/assets/images/common/header/bg-parking-header.png') no-repeat center;
+  background: url('@/layout/layout-header/images/layout-header-2.png') no-repeat center;
   background-size: cover;
 }
 

src/layout/layout-header/components/LayoutHeaderHome.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useRoute } from 'vue-router';
 
-import BarOp from '@/components/CommonHeader/HeaderBarOp.vue';
+import LayoutHeaderNav from '@/layout/layout-header/components/LayoutHeaderNav.vue';
 
 const route = useRoute();
 </script>
@@ -10,7 +10,7 @@ const route = useRoute();
   <header>
     <div class="header-title">
       <h1>{{ route.meta.title }}</h1>
-      <BarOp />
+      <LayoutHeaderNav />
     </div>
   </header>
 </template>
@@ -19,7 +19,7 @@ const route = useRoute();
 .header-title {
   width: 100%;
   height: 108px;
-  background: url('@/assets/images/common/header/bg-layout-header.png') no-repeat center;
+  background: url('@/layout/layout-header/images/layout-header-1.png') no-repeat center;
   background-size: cover;
 
   h1 {

src/layout/layout-header/components/LayoutHeaderNav.vue

@@ -3,9 +3,9 @@
 <template>
   <div class="bar-op">
     <ul>
-      <li><img alt="icon-1" src="@/assets/images/common/icon/icon-1.png" /></li>
-      <li><img alt="icon-2" src="@/assets/images/common/icon/icon-2.png" /></li>
-      <li><img alt="icon-3" src="@/assets/images/common/icon/icon-3.png" /></li>
+      <li><img alt="icon-1" src="../images/icon/icon-1.png" /></li>
+      <li><img alt="icon-2" src="../images/icon/icon-2.png" /></li>
+      <li><img alt="icon-3" src="../images/icon/icon-3.png" /></li>
     </ul>
     <span class="hover">王菠萝</span>
   </div>

src/router/modules/home.ts

@@ -48,8 +48,8 @@ const routes: RouteConfigsTable[] = [
       subtitle: '社区可视化中心',
       headerType: HeaderTypeEnum.subtitle,
       transition: {
-        enter: 'animate__bounceIn animate__faster',
-        leave: 'animate__bounceOut',
+        enter: 'animate__backInLeft animate__faster',
+        leave: 'animate__backOutRight animate__faster',
       },
     },
   },

src/views/big-data/charts/content-footer.tsx

@@ -78,7 +78,7 @@ const option = {
 };
 
 /** 渲染图表 */
-export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+export const renderFooterChart = (element: Ref<HTMLDivElement>) => {
   myChart = echarts.init(element.value, null, {
     renderer: 'canvas',
     devicePixelRatio: window.devicePixelRatio,

src/views/big-data/charts/left-footer.tsx

@@ -59,7 +59,7 @@ const option = {
 };
 
 /** 渲染图表 */
-export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+export const renderFooterChart = (element: Ref<HTMLDivElement>) => {
   myChart = echarts.init(element.value, null, {
     renderer: 'canvas',
     devicePixelRatio: window.devicePixelRatio,
@@ -71,7 +71,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
 };
 
 /** 更新图表数据 */
-export const updateChart = (option: Array<Array<number>>) => {
+export const updateFooterChart = (option: Array<Array<number>>) => {
   const series = myChart.getOption().series;
   series[0].data = option[0];
   series[1].data = option[1];

src/views/big-data/components/big-data-content/components/content-bottom.vue

@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-
-import { renderEcharts } from '@/views/big-data/charts/content-bottom';
-
-const chart = ref<HTMLDivElement>();
-
-onMounted(() => {
-  renderEcharts(chart);
-});
-</script>
-
-<template>
-  <div class="big-data__sidebar-item">
-    <div ref="chart" class="big-data__sidebar-item-chart" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.big-data__sidebar-item {
-  margin: 16px 0 0 0;
-  width: 100%;
-  height: 377px;
-
-  &-chart {
-    padding: 19px 0 0 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>

src/views/big-data/components/big-data-content/components/content-middle.vue

@@ -1,72 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-
-const isActive = ref(true);
-
-/** 改变移动状态 */
-const changeMoveState = () => {
-  setInterval(() => {
-    isActive.value = !isActive.value;
-  }, 2000);
-};
-
-onMounted(() => {
-  changeMoveState();
-});
-</script>
-
-<template>
-  <div class="content-middle">
-    <div class="content-middle__inner">
-      <img
-        :class="[isActive ? 'move-top' : 'move-bottom']"
-        alt=""
-        src="@/views/big-data/images/bg-middle-move.png"
-      />
-
-      <h1>工作台</h1>
-
-      <img
-        :class="[isActive ? 'move-bottom' : 'move-top']"
-        alt=""
-        src="@/views/big-data/images/bg-middle-move.png"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.content-middle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 189px;
-
-  &__inner {
-    position: relative;
-    width: 267px;
-    height: 189px;
-    overflow: hidden;
-  }
-
-  h1 {
-    width: 266px;
-    height: 109px;
-    text-align: center;
-    line-height: 109px;
-    font-size: 34px;
-    color: var(--color-primary-secondary);
-    background: url('@/views/big-data/images/bg-middle-title.png') no-repeat center;
-    background-size: cover;
-  }
-
-  .move-top {
-    animation: 2s linear 0s infinite normal none running line-move;
-  }
-
-  .move-bottom {
-    animation: 2s linear 0s infinite normal none running line-move-alternate;
-  }
-}
-</style>

src/views/big-data/components/big-data-content/components/content-top.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-import { getImage } from '@/utils/image';
-
-const list = [
-  { title: '员工', img: '/images/big-data/bg-content-top-1.png' },
-  { title: '智慧大楼', img: '/images/big-data/bg-content-top-2.png' },
-  { title: '智慧设备', img: '/images/big-data/bg-content-top-3.png' },
-  { title: '数据报表', img: '/images/big-data/bg-content-top-4.png' },
-];
-</script>
-
-<template>
-  <ul>
-    <li v-for="(item, index) in list" :key="index">
-      <img :src="getImage(item.img)" alt="" />
-      <h2>{{ item.title }}</h2>
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" scoped>
-ul {
-  display: flex;
-  justify-content: space-between;
-  margin: 39px 0 0 0;
-  width: 748px;
-  height: 351px;
-
-  li {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    width: 171px;
-    height: 283px;
-
-    img {
-      width: 171px;
-      height: 191px;
-      animation: shakeY 4s linear infinite;
-    }
-
-    h2 {
-      width: 130px;
-      height: 52px;
-      font-size: 16px;
-      line-height: 54px;
-      text-align: center;
-      color: var(--color-primary-secondary);
-      background: url('@/views/big-data/images/bg-content-top-item.png') no-repeat center;
-      background-size: cover;
-    }
-  }
-
-  li:nth-child(1) {
-    transform: translateY(68px);
-  }
-
-  li:nth-child(4) {
-    transform: translateY(68px);
-  }
-}
-</style>

src/views/big-data/components/big-data-content/index.vue

@@ -1,15 +1,154 @@
 <script lang="ts" setup>
-import ContentBottom from '@/views/big-data/components/big-data-content/components/content-bottom.vue';
-import ContentMiddle from '@/views/big-data/components/big-data-content/components/content-middle.vue';
-import ContentTop from '@/views/big-data/components/big-data-content/components/content-top.vue';
+import { useIntervalFn } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
+
+import { getImage } from '@/utils/image';
+import { renderFooterChart } from '@/views/big-data/charts/content-footer';
+
+const headerList = [
+  { title: '员工', img: '/images/big-data/bg-content-top-1.png' },
+  { title: '智慧大楼', img: '/images/big-data/bg-content-top-2.png' },
+  { title: '智慧设备', img: '/images/big-data/bg-content-top-3.png' },
+  { title: '数据报表', img: '/images/big-data/bg-content-top-4.png' },
+];
+
+const isActive = ref(true);
+const footerChartRef = ref<HTMLDivElement>();
+
+/* 改变移动状态 */
+const changeMoveState = () => {
+  useIntervalFn(() => {
+    isActive.value = !isActive.value;
+  }, 2000);
+};
+
+onMounted(() => {
+  changeMoveState();
+  renderFooterChart(footerChartRef);
+});
 </script>
 
 <template>
   <div class="big-data__content">
-    <content-top />
-    <content-middle />
-    <content-bottom />
+    <header class="big-data__header">
+      <ul class="big-data__stats-list">
+        <li v-for="(item, index) in headerList" :key="index">
+          <img :src="getImage(item.img)" alt="" />
+          <h2>{{ item.title }}</h2>
+        </li>
+      </ul>
+    </header>
+
+    <main class="big-data__main">
+      <div class="big-data__workbench">
+        <img
+          :class="[isActive ? 'move-top' : 'move-bottom']"
+          alt=""
+          src="@/views/big-data/images/bg-middle-move.png"
+        />
+        <h1>工作台</h1>
+        <img
+          :class="[isActive ? 'move-bottom' : 'move-top']"
+          alt=""
+          src="@/views/big-data/images/bg-middle-move.png"
+        />
+      </div>
+    </main>
+
+    <footer class="big-data__body">
+      <div ref="footerChartRef" class="big-data__chart-container" />
+    </footer>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.big-data__header {
+  .big-data__stats-list {
+    display: flex;
+    justify-content: space-between;
+    margin: 39px 0 0 0;
+    width: 748px;
+    height: 351px;
+  }
+
+  li {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 171px;
+    height: 283px;
+
+    img {
+      width: 171px;
+      height: 191px;
+      animation: shakeY 4s linear infinite;
+    }
+
+    h2 {
+      width: 130px;
+      height: 52px;
+      font-size: 16px;
+      line-height: 54px;
+      text-align: center;
+      color: var(--color-primary-secondary);
+      background: url('@/views/big-data/images/bg-content-top-item.png') no-repeat center;
+      background-size: cover;
+    }
+  }
+
+  li:nth-child(1) {
+    transform: translateY(68px);
+  }
+
+  li:nth-child(4) {
+    transform: translateY(68px);
+  }
+}
+
+.big-data__main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 189px;
+
+  .big-data__workbench {
+    position: relative;
+    width: 267px;
+    height: 189px;
+    overflow: hidden;
+  }
+
+  h1 {
+    width: 266px;
+    height: 109px;
+    text-align: center;
+    line-height: 109px;
+    font-size: 34px;
+    color: var(--color-primary-secondary);
+    background: url('@/views/big-data/images/bg-middle-title.png') no-repeat center;
+    background-size: cover;
+  }
+
+  .move-top {
+    animation: 2s linear 0s infinite normal none running line-move;
+  }
+
+  .move-bottom {
+    animation: 2s linear 0s infinite normal none running line-move-alternate;
+  }
+}
+
+.big-data__body {
+  margin: 16px 0 0 0;
+  width: 100%;
+  height: 377px;
+
+  .big-data__chart-container {
+    padding: 19px 0 0 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/big-data/components/big-data-left/components/left-bottom.vue

@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-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 randomData = () => {
-  function random() {
-    return Array(12)
-      .fill(0)
-      .map(() => {
-        const num = (Math.random() * 100).toFixed(2);
-        return parseInt(num);
-      });
-  }
-
-  const data: Array<Array<number>> = [random(), random()];
-
-  updateChart(data);
-};
-
-/* 模拟数据 */
-const mockRandomData = () => {
-  useIntervalFn(() => {
-    randomData();
-  }, 1000);
-};
-
-onMounted(() => {
-  renderEcharts(chart);
-  randomData();
-
-  mockRandomData();
-});
-</script>
-
-<template>
-  <div class="big-data__sidebar-item">
-    <div class="flex-x-between">
-      <div class="big-data__sidebar-title">
-        <h1>园区规划</h1>
-      </div>
-    </div>
-    <div ref="chart" class="chart" />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.big-data__sidebar-item {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 272px;
-}
-
-.chart {
-  width: 100%;
-  height: 200px;
-}
-</style>

src/views/big-data/components/big-data-left/components/left-middle.vue

@@ -1,106 +0,0 @@
-<script lang="tsx" setup>
-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 randomNumber = (range: number = 100) => {
-  return parseInt((Math.random() * range).toFixed(0));
-};
-
-const list = ref([
-  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-  { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-]);
-
-const renderItem = () => {
-  return (
-    <>
-      {list.value.map((item, index) => {
-        return (
-          <li key={index}>
-            <div>
-              <h1>{item.title}</h1>
-              <em>¥ {formatter(item.amount)}</em>
-            </div>
-            <ChartProgress percent={item.percent} />
-          </li>
-        );
-      })}
-    </>
-  );
-};
-
-const mockList = () => {
-  useIntervalFn(() => {
-    list.value = [
-      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-      { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
-    ];
-  }, 1000);
-};
-
-onMounted(() => {
-  mockList();
-});
-</script>
-
-<template>
-  <div class="big-data__sidebar-item h-[389px]">
-    <div class="flex-x-between">
-      <h1 class="big-data__sidebar-title">本年经营收入</h1>
-      <span class="big-data__sidebar-title-describe">截止时间至2021年6月</span>
-    </div>
-
-    <ul>
-      <component :is="renderItem()" />
-    </ul>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-ul {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: space-between;
-  margin: 18px 0 0 0;
-  width: 100%;
-  height: 300px;
-}
-
-li {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 0 18px 0 14px;
-  width: 248px;
-  height: 143px;
-  background: url('@/views/big-data/images/bg-middle.png') no-repeat center;
-  background-size: cover;
-
-  .progress {
-    position: absolute;
-    top: -10px;
-    right: -5px;
-    width: 100px;
-    height: 100px;
-  }
-
-  h1 {
-    font-size: 18px;
-  }
-
-  em {
-    font-size: 28px;
-    color: var(--color-warning-secondary);
-    font-style: normal;
-  }
-}
-</style>

src/views/big-data/components/big-data-left/components/left-top.vue

@@ -1,101 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-import { displayContent } from '@/components/PanelItem/DigitalNumber';
-import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
-
-const timeList = ref<TimeSelectType[]>([
-  { label: '2020.09', value: '2021' },
-  { label: '2020.09', value: '2021' },
-  { label: '2020.09', value: '2021' },
-]);
-</script>
-
-<template>
-  <div class="big-data__sidebar-item">
-    <div class="flex-x-between">
-      <h1 class="big-data__sidebar-title">规模效益</h1>
-      <TimeSelect :time-list="timeList" />
-    </div>
-
-    <ul>
-      <li>
-        <div class="big-data__sidebar-item-body-title">
-          <h1>进出口总值</h1>
-          <div>
-            <span>
-              总值增幅
-              <em>+123%</em>
-            </span>
-            <span>
-              超越第二名
-              <em>+22.3%</em>
-            </span>
-          </div>
-        </div>
-        <div class="money-digit">
-          <component :is="displayContent('8888888')" />
-        </div>
-      </li>
-
-      <li>
-        <div class="big-data__sidebar-item-body-title">
-          <h1>进出口总值</h1>
-          <div>
-            <span>
-              环比变化
-              <em>+123%</em>
-            </span>
-          </div>
-        </div>
-        <div class="money-digit">
-          <component :is="displayContent('888888')" />
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-ul {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 100%;
-  height: 198px;
-
-  li {
-    display: flex;
-    flex-direction: column;
-    margin: 9px 0 0 0;
-    width: 100%;
-  }
-}
-
-.big-data__sidebar-item {
-  height: 274px;
-
-  &-body-title {
-    display: flex;
-    justify-content: space-between;
-    margin: 0 0 5px 0;
-    width: 100%;
-
-    h1 {
-      font-size: 18px;
-    }
-
-    span {
-      margin: 0 4px 0 0;
-      font-size: 12px;
-    }
-
-    em {
-      font-style: normal;
-      font-size: 14px;
-      color: var(--color-success);
-    }
-  }
-}
-</style>

src/views/big-data/components/big-data-left/index.vue

@@ -1,13 +1,231 @@
 <script lang="ts" setup>
-import LeftBottom from '@/views/big-data/components/big-data-left/components/left-bottom.vue';
-import LeftMiddle from '@/views/big-data/components/big-data-left/components/left-middle.vue';
-import LeftTop from '@/views/big-data/components/big-data-left/components/left-top.vue';
+import { useIntervalFn } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
+
+import { displayContent } from '@/components/PanelItem/DigitalNumber';
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { formatter } from '@/utils/chart';
+import { ChartProgress } from '@/views/big-data/charts/left-body';
+import { renderFooterChart, updateFooterChart } from '@/views/big-data/charts/left-footer';
+
+const timeList = ref<TimeSelectType[]>([
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+]);
+
+/* body数据---模拟数据 */
+const bodyList = ref([]);
+const initBodyList = () => {
+  const randomNumber = (range: number = 100) => {
+    return parseInt((Math.random() * range).toFixed(0));
+  };
+
+  bodyList.value = [
+    { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+    { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+    { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+    { title: '经营总收入', amount: randomNumber(9999999), percent: randomNumber() },
+  ];
+};
+
+/* 底部图表---模拟数据 */
+const footerChartRef = ref<HTMLDivElement>();
+const mockFooterChart = () => {
+  function random() {
+    return Array(12)
+      .fill(0)
+      .map(() => {
+        const num = (Math.random() * 100).toFixed(2);
+        return parseInt(num);
+      });
+  }
+
+  const data: Array<Array<number>> = [random(), random()];
+  updateFooterChart(data);
+};
+
+onMounted(() => {
+  // 渲染底部图表
+  renderFooterChart(footerChartRef);
+  initBodyList();
+
+  // 模拟底部图表
+  useIntervalFn(() => {
+    mockFooterChart();
+    initBodyList();
+  }, 1000);
+});
 </script>
 
 <template>
   <div class="big-data__sidebar">
-    <left-top />
-    <left-middle />
-    <left-bottom />
+    <div class="big-data__header">
+      <div class="flex-x-between">
+        <h1 class="big-data__sidebar-title">规模效益</h1>
+        <TimeSelect :time-list="timeList" />
+      </div>
+
+      <ul>
+        <li>
+          <div class="big-data__header-title">
+            <h1>进出口总值</h1>
+            <div>
+              <span>
+                总值增幅
+                <em>+123%</em>
+              </span>
+              <span>
+                超越第二名
+                <em>+22.3%</em>
+              </span>
+            </div>
+          </div>
+          <div class="money-digit">
+            <component :is="displayContent('8888888')" />
+          </div>
+        </li>
+
+        <li>
+          <div class="big-data__header-title">
+            <h1>进出口总值</h1>
+            <div>
+              <span>
+                环比变化
+                <em>+123%</em>
+              </span>
+            </div>
+          </div>
+          <div class="money-digit">
+            <component :is="displayContent('888888')" />
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="big-data__body h-[389px]">
+      <div class="flex-x-between">
+        <h1 class="big-data__sidebar-title">本年经营收入</h1>
+        <span class="big-data__sidebar-title-describe">截止时间至2021年6月</span>
+      </div>
+
+      <ul>
+        <li v-for="(item, index) in bodyList" :key="index">
+          <div>
+            <h1>{{ item.title }}</h1>
+            <em>¥ {{ formatter(item.amount) }}}</em>
+          </div>
+          <ChartProgress :percent="item.percent" />
+        </li>
+      </ul>
+    </div>
+
+    <div class="big-data__footer">
+      <div class="flex-x-between">
+        <div class="big-data__sidebar-title">
+          <h1>园区规划</h1>
+        </div>
+      </div>
+      <div ref="footerChartRef" class="big-data__footer-chart-container" />
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.big-data__header {
+  height: 274px;
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    height: 198px;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      margin: 9px 0 0 0;
+      width: 100%;
+    }
+  }
+
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 5px 0;
+    width: 100%;
+
+    h1 {
+      font-size: 18px;
+    }
+
+    span {
+      margin: 0 4px 0 0;
+      font-size: 12px;
+    }
+
+    em {
+      font-style: normal;
+      font-size: 14px;
+      color: var(--color-success);
+    }
+  }
+}
+
+.big-data__body {
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-content: space-between;
+    margin: 18px 0 0 0;
+    width: 100%;
+    height: 300px;
+  }
+
+  li {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 0 18px 0 14px;
+    width: 248px;
+    height: 143px;
+    background: url('@/views/big-data/images/bg-middle.png') no-repeat center;
+    background-size: cover;
+
+    .progress {
+      position: absolute;
+      top: -10px;
+      right: -5px;
+      width: 100px;
+      height: 100px;
+    }
+
+    h1 {
+      font-size: 18px;
+    }
+
+    em {
+      font-size: 28px;
+      color: var(--color-warning-secondary);
+      font-style: normal;
+    }
+  }
+}
+
+.big-data__footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 272px;
+
+  &-chart-container {
+    width: 100%;
+    height: 200px;
+  }
+}
+</style>

src/views/big-data/components/big-data-right/components/right-bottom.vue

@@ -13,7 +13,7 @@ const list = [
 </script>
 
 <template>
-  <div class="big-data__sidebar-item">
+  <div class="big-data__body">
     <div class="flex-x-between">
       <h1 class="big-data__sidebar-title">园区规划</h1>
     </div>
@@ -28,7 +28,7 @@ const list = [
 </template>
 
 <style lang="scss" scoped>
-.big-data__sidebar-item {
+.big-data__body {
   width: 100%;
 
   .big-data__sidebar-card {

src/views/big-data/components/big-data-right/components/right-middle.vue

@@ -11,7 +11,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="big-data__sidebar-item">
+  <div class="big-data__body">
     <div class="flex-x-between">
       <h1 class="big-data__sidebar-title">企业信息</h1>
       <span class="big-data__sidebar-title-describe">截止时间至2021.12.30</span>
@@ -62,7 +62,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.big-data__sidebar-item {
+.big-data__body {
   width: 100%;
   height: 338px;
 }
@@ -79,7 +79,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/big-data/images/frame-1.png') no-repeat center;
     background-size: cover;
 
     h1 {

src/views/big-data/components/big-data-right/components/right-top.vue

@@ -4,7 +4,7 @@ import { onMounted, ref } from 'vue';
 import { displayContent } from '@/components/PanelItem/DigitalNumber';
 import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
-import { renderEcharts } from '@/views/big-data/charts/right-top';
+import { renderEcharts } from '@/views/big-data/charts/right-header';
 
 const chartProgress = ref<HTMLDivElement>();
 const money = '1386114';
@@ -21,11 +21,11 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="big-data__sidebar-item h-[226px]">
+  <div class="big-data__header h-[226px]">
     <div class="flex-x-between">
-      <h1 class="big-data__sidebar-title">园区进出口额</h1>
+      <h1 class="big-data__header-title">园区进出口额</h1>
       <div>
-        <span class="big-data__sidebar-tag">总数据</span>
+        <span class="big-data__header-tag">总数据</span>
         <TimeSelect :time-list="timeList" />
       </div>
     </div>
@@ -35,9 +35,9 @@ onMounted(() => {
     </div>
 
     <div>
-      <div ref="chartProgress" class="big-data__sidebar-progress" />
+      <div ref="chartProgress" class="big-data__header-progress" />
 
-      <ul class="big-data__sidebar-value">
+      <ul class="big-data__header-value">
         <li>
           进口额
           <i>¥1551154545</i>
@@ -62,8 +62,9 @@ onMounted(() => {
   }
 }
 
-.big-data__sidebar {
+.big-data__header {
   width: 100%;
+  height: 226px;
 
   &-progress {
     margin: 14px 0 0 0;

src/views/community/index.vue

@@ -1,7 +1,7 @@
 <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';
+import CommunityContent from '@/views/community/components/community-content.vue';
+import CommunityLeft from '@/views/community/components/community-left.vue';
+import CommunityRight from '@/views/community/components/community-right.vue';
 </script>
 
 <template>

src/views/login/components/login-header.vue

@@ -17,7 +17,7 @@ const route = useRoute();
 .header-title {
   width: 100%;
   height: 108px;
-  background: url('@/assets/images/common/header/bg-layout-header.png') no-repeat center;
+  background: url('@/layout/layout-header/images/layout-header-1.png') no-repeat center;
   background-size: cover;
 
   h1 {