🎨 feat: 修改公共组件位置

mock/community.ts

@@ -0,0 +1,42 @@
+import { defineFakeRoute } from 'vite-plugin-fake-server/client';
+
+const randomNumber = (range: number = 100) => {
+  return parseInt((Math.random() * range).toFixed(0));
+};
+
+export default defineFakeRoute([
+  {
+    url: 'community-statistics',
+    method: 'GET',
+    response: () => ({
+      code: 200,
+      data: [
+        {
+          name: '统计人口',
+          total: randomNumber(9999),
+          subtitle: `${randomNumber()}%`,
+          subTotal: randomNumber(99999),
+        },
+        {
+          name: '统计人口',
+          total: randomNumber(9999),
+          subtitle: `${randomNumber()}%`,
+          subTotal: randomNumber(99999),
+        },
+        {
+          name: '统计人口',
+          total: randomNumber(9999),
+          subtitle: `${randomNumber()}%`,
+          subTotal: randomNumber(99999),
+        },
+        {
+          name: '统计人口',
+          total: randomNumber(9999),
+          subtitle: `${randomNumber()}%`,
+          subTotal: randomNumber(99999),
+        },
+      ],
+      message: '操作成功',
+    }),
+  },
+]);

src/api/community.ts

@@ -0,0 +1,6 @@
+import request from '@/api/server/request';
+
+/* 社区统计 */
+export const getCommunityStatistics = () => {
+  return request.get('community-statistics');
+};

src/api/server/request.ts

@@ -34,22 +34,22 @@ service.interceptors.response.use(
     if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') {
       return response;
     }
-    // const { code, data, msg } = response.data;
-    // if (code === ResultEnum.SUCCESS) {
-    //   return data;
-    // }
+    const { code, data, message } = response.data;
+    if (code === 200) {
+      return data;
+    }
 
     if (response.status === 200) {
       return response.data;
     }
 
     // ElMessage.error(msg || '系统出错');
-    return Promise.reject(response.data.message || 'Error');
+    return Promise.reject(message || 'Error');
   },
   (error: any) => {
     // 异常处理
     if (error.response.data) {
-      // const { code, msg } = error.response.data;
+      // const { code, message } = error.response.data;
       // if (code === ResultEnum.TOKEN_INVALID) {
       // ElNotification({
       //   title: '提示',

src/api/server/requestMock.ts

@@ -34,10 +34,10 @@ service.interceptors.response.use(
     if (response.config.responseType === 'blob' || response.config.responseType === 'arraybuffer') {
       return response;
     }
-    // const { code, data, msg } = response.data;
-    // if (code === ResultEnum.SUCCESS) {
-    //   return data;
-    // }
+    const { code, data, msg } = response.data;
+    if (code === 200) {
+      return data;
+    }
 
     if (response.status === 200) {
       return response.data;

src/components/TimeSelect/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 
 defineProps({
   timeList: Array<TimeSelectType>,

src/store/modules/community.ts

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia';
+
+import { getCommunityStatistics } from '@/api/community';
+
+export const useCommunityStore = defineStore('communityStore', {
+  state: () => ({
+    communityStatisticsList: [],
+  }),
+  actions: {
+    /* 社区统计 */
+    async loadCommunityStatisticsList() {
+      const result = await getCommunityStatistics();
+      this.communityStatisticsList = result.data;
+    },
+  },
+});

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

@@ -3,8 +3,8 @@ 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 TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/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';

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

@@ -2,8 +2,8 @@
 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 TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 import { renderEcharts } from '@/views/big-data/charts/right-header';
 
 const chartProgress = ref<HTMLDivElement>();

src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 import { renderEcharts } from '@/views/business-supervision/charts/contentBottom';
 
 const chartYear = ref();

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue

@@ -2,8 +2,8 @@
 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 TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarTop';
 
 const chartProgress = ref<HTMLDivElement>();

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },

src/views/community/components/CommonPanel.vue

@@ -21,7 +21,7 @@ defineProps({
 .panel {
   width: 430px;
   height: 440px;
-  background: url('./bg.png') no-repeat;
+  background: url('../images/bg-common-panel.png') no-repeat;
   background-size: cover;
 
   h1 {

src/views/community/components/community-left.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import CommunityPanel from '@/components/PanelItem/CommunityPanel/index.vue';
+import CommonPanel from '@/views/community/components/CommonPanel.vue';
 </script>
 
 <template>
   <div class="community__sidebar">
     <div class="community__sidebar-item">
-      <CommunityPanel title="智慧设备总数" />
+      <CommonPanel title="智慧设备总数" />
     </div>
 
     <div class="community__sidebar-item">
-      <CommunityPanel title="预警概览" />
+      <CommonPanel title="预警概览" />
     </div>
   </div>
 </template>

src/views/community/components/community-right.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import CommunityPanel from '@/components/PanelItem/CommunityPanel/index.vue';
+import CommonPanel from '@/views/community/components/CommonPanel.vue';
 </script>
 
 <template>
   <div class="community__sidebar">
     <div class="community__sidebar-item">
-      <CommunityPanel title="标题标题" />
+      <CommonPanel title="标题标题" />
     </div>
 
     <div class="community__sidebar-item">
-      <CommunityPanel title="标题标题" />
+      <CommonPanel title="标题标题" />
     </div>
   </div>
 </template>

src/views/data-analyse/components/PanelTitle.vue

@@ -14,6 +14,7 @@ defineProps({
 <style lang="scss" scoped>
 h1 {
   position: relative;
+  color: #fff;
   line-height: 40px;
   font-size: 20px;
 

src/views/data-analyse/components/data-analyse-content.vue

@@ -1,8 +1,8 @@
 <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';
+import PanelTitle from '@/views/data-analyse/components/PanelTitle.vue';
 
 const titleList = [170582, 586220, 168902];
 
@@ -30,7 +30,7 @@ onMounted(() => {
     <main class="data-analyse-content__body">body</main>
 
     <footer class="data-analyse-content__footer">
-      <PanelTitle1 title="销售设备数量区域占比" />
+      <PanelTitle title="销售设备数量区域占比" />
       <div ref="footerChartRef" class="data-analyse-content__footer-chart" />
     </footer>
   </div>
@@ -42,10 +42,6 @@ onMounted(() => {
   width: 803px;
   height: 970px;
 
-  h1 {
-    color: white;
-  }
-
   &__header {
     display: flex;
     justify-content: space-between;

src/views/data-analyse/components/data-analyse-left.vue

@@ -1,9 +1,9 @@
 <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 Progress1 from '@/components/Progress/Progress1.vue';
 import { renderEcharts } from '@/views/data-analyse/charts/left-brand';
+import PanelTitle from '@/views/data-analyse/components/PanelTitle.vue';
 
 const brandChartRef = ref();
 const deviceTotal = ref('1010');
@@ -40,7 +40,7 @@ onMounted(() => {
 
     <!--中心区域-->
     <div class="data-analyse-left__center">
-      <PanelTitle1 title="销售公司销售设备数量占比" />
+      <PanelTitle title="销售公司销售设备数量占比" />
 
       <ul>
         <li v-for="(item, index) in companyList" :key="index">
@@ -59,7 +59,7 @@ onMounted(() => {
 
     <!--底部区域-->
     <div class="data-analyse-left__bottom">
-      <PanelTitle1 title="品牌占有率" />
+      <PanelTitle title="品牌占有率" />
 
       <div ref="brandChartRef" class="data-analyse-left__bottom-chart" />
     </div>

src/views/data-analyse/components/data-analyse-right.vue

@@ -1,9 +1,9 @@
 <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';
+import PanelTitle from '@/views/data-analyse/components/PanelTitle.vue';
 
 const footerChartRef = ref();
 const footerChart = () => {
@@ -24,17 +24,17 @@ onMounted(() => {
 <template>
   <div class="data-analyse-right">
     <header class="data-analyse-right__header">
-      <PanelTitle1 title="数据占有率" />
+      <PanelTitle title="数据占有率" />
       <div ref="bodyChartRef" class="data-analyse-right-chart" />
     </header>
 
     <main class="data-analyse-right__body">
-      <PanelTitle1 title="数据分析展示" />
+      <PanelTitle title="数据分析展示" />
       <div ref="bodyChartRef" class="data-analyse-right__body-chart" />
     </main>
 
     <footer class="data-analyse-right__footer">
-      <PanelTitle1 title="数据展示统计" />
+      <PanelTitle title="数据展示统计" />
 
       <div ref="footerChartRef" class="data-analyse-right__footer-chart" />
     </footer>
@@ -46,10 +46,6 @@ onMounted(() => {
   width: 496px;
   height: 970px;
 
-  h1 {
-    color: #fff;
-  }
-
   &__header {
     margin: 10px 0 0 0;
     width: 100%;

src/views/data-analyse/index.vue

@@ -2,9 +2,9 @@
 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';
+import DataAnalyseContent from '@/views/data-analyse/components/data-analyse-content.vue';
+import DataAnalyseLeft from '@/views/data-analyse/components/data-analyse-left.vue';
+import DataAnalyseRight from '@/views/data-analyse/components/data-analyse-right.vue';
 
 const appStore = useAppStore();
 

src/views/smart-park/components/common/content-item.vue

@@ -12,11 +12,7 @@ defineProps({
     <div class="mt-[7px] font-size-[18px] c-primary">{{ door }}</div>
     <div class="flex-center mt-[8px] c-primary">
       <span class="float-left font-size-[14px] c-primary-secondary cursor-pointer hover">查看</span>
-      <img
-        alt="arrow-item"
-        class="float-left h-[16px]"
-        src="@/views/smart-park/images/arrow/arrow-item.png"
-      />
+      <img alt="arrow-item" class="float-left h-[16px]" src="../../images/arrow/arrow-item.png" />
     </div>
   </div>
 </template>

src/views/smart-park/components/smart-park-content.vue

@@ -0,0 +1,277 @@
+<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 ContentItem from '@/views/smart-park/components/common/content-item.vue';
+import ContentPercent from '@/views/smart-park/components/common/content-percent.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>
+  <div class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
+    <div class="smart-park__sidebar smart-park__sidebar--left">
+      <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
+        <!-- 路况 -->
+        <div class="smart-park__sidebar-title">
+          <h1>实时道路情况</h1>
+        </div>
+
+        <!-- 汽车列表 -->
+        <ul class="mt-[32px]">
+          <li class="smart-park__sidebar--left-item">
+            <img alt="car-1" src="../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="../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="../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="../images/car/car-1.png" />
+            <p>入卡口（东南门）</p>
+            <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
+          </li>
+        </ul>
+
+        <!-- 建议 -->
+        <div class="smart-park__sidebar--left-suggest">
+          <h5>车流量建议</h5>
+          <p>
+            高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
+            <span>可建议XXX企业向后延迟15min错峰入园。</span>
+            高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="smart-park__body">
+      <div class="h-[570px] flex-y-between">
+        <div class="smart-park__body-title">
+          <h1>卡口车辆监控</h1>
+        </div>
+
+        <!-- 中间布局 -->
+        <div class="smart-park__body-inner">
+          <div class="pos-relative">
+            <content-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
+            <content-percent :percent="44" class="top-[73px] left-[193px]" />
+          </div>
+          <div class="pos-relative">
+            <content-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
+            <content-percent :percent="25" class="top-[73px] right-[192px]" />
+          </div>
+          <div class="pos-relative">
+            <content-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
+            <content-percent :percent="25" class="top-[40px] left-[193px]" />
+          </div>
+          <div class="pos-relative">
+            <content-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
+            <content-percent :percent="44" class="top-[40px] left-[66px]" />
+          </div>
+
+          <div class="smart-park__body-content">
+            <div class="smart-park__body-content-headline flex-center">
+              <h1>智能管控</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <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>
+  </div>
+</template>
+<style lang="scss" scoped>
+.smart-park__sidebar--left {
+  margin: 0 20px 0 0;
+  transform: rotateY(180deg);
+
+  &-item {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 330px;
+    height: 61px;
+    margin: 0 0 9px 0;
+    background: url('@/views/smart-park/images/bg/bg-frame.png') no-repeat center;
+    background-size: cover;
+
+    img {
+      width: 60px;
+    }
+
+    p {
+      color: #fff;
+      font-size: 14px;
+    }
+  }
+
+  &-suggest {
+    margin: 24px 0 0 0;
+    padding: 15px 14px 17px 20px;
+    width: 330px;
+    height: 157px;
+    color: #fff;
+    font-size: 14px;
+    background: url('@/views/smart-park/images/bg/bg-suggest.png') no-repeat center;
+    background-size: cover;
+
+    span {
+      color: var(--color-warning-secondary);
+    }
+  }
+}
+
+.smart-park__body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 824px;
+  height: 650px;
+  background: url('@/views/smart-park/images/bg/bg-middle.png') no-repeat center;
+  background-size: cover;
+
+  // 中间部分标题
+  &-title {
+    height: 61px;
+    background: url('@/views/smart-park/images/bg/bg-main-title.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      color: #fff;
+      font-size: 22px;
+      text-align: center;
+    }
+  }
+
+  // 中间部分四个部分
+  &-inner {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    position: relative;
+    margin: 28px 0 77px 0;
+    width: 666px;
+    height: 400px;
+    background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
+    background-size: cover;
+  }
+
+  // 中心智能管控
+  &-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 138px;
+    height: 138px;
+
+    &-headline {
+      width: 100%;
+      height: 100%;
+      background: url('@/views/smart-park/images/bg/bg-main-center.png');
+      background-size: cover;
+      font-size: 19px;
+      animation: rotate 30s linear infinite;
+
+      h1 {
+        width: 53px;
+        color: var(--color-primary-secondary);
+        text-align: center;
+        animation: rotate-reverse 30s linear infinite;
+      }
+    }
+  }
+}
+
+.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>

src/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue

@@ -1,104 +0,0 @@
-<script lang="ts" setup>
-import ContentItem from '@/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue';
-import ContentPercent from '@/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-percent.vue';
-</script>
-
-<template>
-  <div class="smart-park-central">
-    <div class="h-[570px] flex-y-between">
-      <div class="smart-park-central-title">
-        <h1>卡口车辆监控</h1>
-      </div>
-
-      <!-- 中间布局 -->
-      <div class="smart-park-central-inner">
-        <div class="pos-relative">
-          <content-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
-          <content-percent :percent="44" class="top-[73px] left-[193px]" />
-        </div>
-        <div class="pos-relative">
-          <content-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
-          <content-percent :percent="25" class="top-[73px] right-[192px]" />
-        </div>
-        <div class="pos-relative">
-          <content-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
-          <content-percent :percent="25" class="top-[40px] left-[193px]" />
-        </div>
-        <div class="pos-relative">
-          <content-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
-          <content-percent :percent="44" class="top-[40px] left-[66px]" />
-        </div>
-
-        <div class="smart-park-central-content">
-          <div class="smart-park-central-content-headline flex-center">
-            <h1>智能管控</h1>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.smart-park-central {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 824px;
-  height: 650px;
-  background: url('@/views/smart-park/images/bg/bg-middle.png') no-repeat center;
-  background-size: cover;
-
-  // 中间部分标题
-  &-title {
-    height: 61px;
-    background: url('@/views/smart-park/images/bg/bg-main-title.png') no-repeat center;
-    background-size: cover;
-
-    h1 {
-      color: #fff;
-      font-size: 22px;
-      text-align: center;
-    }
-  }
-
-  // 中间部分四个部分
-  &-inner {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    position: relative;
-    margin: 28px 0 77px 0;
-    width: 666px;
-    height: 400px;
-    background: url('@/views/smart-park/images/bg/bg-main-1.png') no-repeat center;
-    background-size: cover;
-  }
-
-  // 中心智能管控
-  &-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 138px;
-    height: 138px;
-
-    &-headline {
-      width: 100%;
-      height: 100%;
-      background: url('@/views/smart-park/images/bg/bg-main-center.png');
-      background-size: cover;
-      font-size: 19px;
-      animation: rotate 30s linear infinite;
-
-      h1 {
-        width: 53px;
-        color: var(--color-primary-secondary);
-        text-align: center;
-        animation: rotate-reverse 30s linear infinite;
-      }
-    }
-  }
-}
-</style>

src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue

@@ -1,88 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <div class="smart-park__sidebar smart-park__sidebar--left">
-    <div class="pt-[55px] pl-[25px]" style="transform: rotateY(180deg)">
-      <!-- 路况 -->
-      <div class="smart-park__sidebar-title">
-        <h1>实时道路情况</h1>
-      </div>
-
-      <!-- 汽车列表 -->
-      <ul class="mt-[32px]">
-        <li class="smart-park__sidebar--left-item">
-          <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="@/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="@/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="@/views/smart-park/images/car/car-1.png" />
-          <p>入卡口（东南门）</p>
-          <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
-        </li>
-      </ul>
-
-      <!-- 建议 -->
-      <div class="smart-park__sidebar--left-suggest">
-        <h5>车流量建议</h5>
-        <p>
-          高峰时段大量车流量容易造成拥堵，主要由XXX企业、XXX企业的车辆构成，
-          <span>可建议XXX企业向后延迟15min错峰入园。</span>
-          高峰时段大量车流量容易造成拥堵， 主要由XXX企业、XXX企业的车辆构成
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.smart-park__sidebar--left {
-  margin: 0 20px 0 0;
-  transform: rotateY(180deg);
-
-  &-item {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    width: 330px;
-    height: 61px;
-    margin: 0 0 9px 0;
-    background: url('@/views/smart-park/images/bg/bg-frame.png') no-repeat center;
-    background-size: cover;
-
-    img {
-      width: 60px;
-    }
-
-    p {
-      color: #fff;
-      font-size: 14px;
-    }
-  }
-
-  &-suggest {
-    margin: 24px 0 0 0;
-    padding: 15px 14px 17px 20px;
-    width: 330px;
-    height: 157px;
-    color: #fff;
-    font-size: 14px;
-    background: url('@/views/smart-park/images/bg/bg-suggest.png') no-repeat center;
-    background-size: cover;
-
-    span {
-      color: var(--color-warning-secondary);
-    }
-  }
-}
-</style>

src/views/smart-park/components/smart-park-content/index.vue

@@ -1,100 +0,0 @@
-<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';
-
-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 />
-    <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>

src/views/smart-park/components/smart-park-footer.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="@/views/smart-park/images/car/car-39.png" />
+        <img alt="车辆管理" src="../images/car/car-39.png" />
         <span class="text-white hover">车辆管理</span>
       </li>
     </ul>

src/views/smart-park/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import SmartPartContent from '@/views/smart-park/components/smart-park-content/index.vue';
-import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/index.vue';
+import SmartParkContent from '@/views/smart-park/components/smart-park-content.vue';
+import SmartParkFooter from '@/views/smart-park/components/smart-park-footer.vue';
 </script>
 
 <template>
@@ -9,9 +9,9 @@ import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/ind
       <img alt="左箭头" src="@/views/smart-park/images/arrow/arrow-left.png" />
     </div>
 
-    <smart-part-content />
+    <smart-park-content />
 
-    <smart-part-footer />
+    <smart-park-footer />
 
     <div class="smart-park__arrow right-[38px]">
       <img alt="左箭头" src="@/views/smart-park/images/arrow/arrow-right.png" />

src/views/welcome/components/welcome-content.vue

@@ -6,9 +6,9 @@ const router = useRouter();
 const list = [
   { title: '停车场', image: '/images/welcome/car.png', target: '/smart-park' },
   { title: '数据分析', image: '/images/welcome/distribution.png', target: '/data-analyse' },
-  { title: '智慧渣土', image: '/images/welcome/muck.png', target: '/smart-park' },
+  { title: '大数据', image: '/images/welcome/muck.png', target: '/big-data' },
   { title: '社区', image: '/images/welcome/clean-city.png', target: '/community' },
-  { title: '智慧路灯', image: '/images/welcome/lamp.png', target: '/smart-park' },
+  { title: '经营监督', image: '/images/welcome/lamp.png', target: '/business-supervision' },
 ];
 </script>
 

src/views/welcome/index.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import WelcomeContent from '@/views/welcome/components/welcome-content.vue';
-import WelcomeFooter from '@/views/welcome/components/welcome-footer.vue';
 </script>
 
 <template>
   <div class="welcome">
     <welcome-content />
-    <welcome-footer />
+    <!--<welcome-footer />-->
   </div>
 </template>