feat: 左侧拼图完成;修改部分代码格式

src/assets/styles/global.scss

@@ -4,8 +4,10 @@
 :root {
   --color-primary: #027AFF;
   --color-primary-secondary: #00FFFF;
+  --color-primary-secondary-1: rgba(0, 255, 255, 0.71);
   --color-info: #7CC1FF;
   --color-info-secondary: #707070;
+  --color-info-secondary-1: #ADCBFF;
   --color-hover: #1C8ADF;
   --color-warning: #FFBE44;
   --color-warning-secondary: #FEDB65;

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

@@ -14,10 +14,10 @@ const timeList = ref<TimeSelectType[]>([
 <template>
   <div class="business-supervision__bottom">
     <div class="business-supervision__bottom-inner">
+      <div class="business-supervision__bottom-title">
         <div class="flex-x-between">
-        <div class="flex-x-between">
+          <h1>年度税收概览</h1>
-          <h1 class="font-size-[22px]">年度税收概览</h1>
+          <span class="business-supervision__bottom-title-unit">单位/万元</span>
-          <span class="font-size-[12px]">单位/万元</span>
         </div>
         <TimeSelect :time-list="timeList" />
       </div>
@@ -37,5 +37,22 @@ const timeList = ref<TimeSelectType[]>([
     padding: 20px;
     color: #fff;
   }
+
+  &-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 35px;
+
+    h1 {
+      font-size: 22px;
+    }
+
+    &-unit {
+      display: inline-block;
+      margin: 14px 0 0 4px;
+      font-size: 12px;
+    }
+  }
 }
 </style>

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

@@ -5,38 +5,46 @@
     <li>
       <img
         alt="bg-middle-1"
-        src="@/assets/images/business-supervision/bg/content/bg-middle-1.png"
+        src="../../../../assets/images/business-supervision/bg/content/bg-middle-1.png"
       />
       <h2>员工</h2>
+      <div class="business-supervision__middle-detail">
         <strong>365</strong>
         <span>相关员工</span>
+      </div>
     </li>
     <li>
       <img
         alt="bg-middle-2"
-        src="@/assets/images/business-supervision/bg/content/bg-middle-2.png"
+        src="../../../../assets/images/business-supervision/bg/content/bg-middle-2.png"
       />
       <h2>智慧大楼</h2>
+      <div class="business-supervision__middle-detail">
         <strong>365</strong>
         <span>区域面积/㎡</span>
+      </div>
     </li>
     <li>
       <img
         alt="bg-middle-3"
-        src="@/assets/images/business-supervision/bg/content/bg-middle-3.png"
+        src="../../../../assets/images/business-supervision/bg/content/bg-middle-3.png"
       />
       <h2>智慧设备</h2>
+      <div class="business-supervision__middle-detail">
         <strong>1123</strong>
         <span>设备总数</span>
+      </div>
     </li>
     <li>
       <img
         alt="bg-middle-3"
-        src="@/assets/images/business-supervision/bg/content/bg-middle-3.png"
+        src="../../../../assets/images/business-supervision/bg/content/bg-middle-3.png"
       />
       <h2>数据报表</h2>
+      <div class="business-supervision__middle-detail">
         <strong>287</strong>
         <span>报表下载总数</span>
+      </div>
     </li>
   </ul>
 </template>
@@ -76,6 +84,18 @@
         center;
       background-size: cover;
     }
+  }
+
+  &-detail {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 140px;
+    height: 99px;
+    background: url('@/assets/images/business-supervision/bg/content/bg-middle-detail.png')
+      no-repeat center;
+    background-size: cover;
 
     strong {
       font-size: 32px;

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

@@ -32,6 +32,7 @@ const list = [
   },
 ];
 
+// 动态顶部元素
 const contentEl = () => {
   return (
     <>
@@ -52,7 +53,7 @@ const contentEl = () => {
             alt="card-1"
             src={
               new URL(
-                `../../../assets/images/business-supervision/bg/content/bg-card-${index + 1}.png`,
+                `../../../../assets/images/business-supervision/bg/content/bg-card-${index + 1}.png`,
                 import.meta.url
               ).href
             }

src/views/business-supervision/business-supervision-content/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import ContentBottom from '@/views/business-supervision/business-supervision-content/content-bottom.vue';
+import ContentBottom from '@/views/business-supervision/business-supervision-content/components/content-bottom.vue';
-import ContentMiddle from '@/views/business-supervision/business-supervision-content/content-middle.vue';
+import ContentMiddle from '@/views/business-supervision/business-supervision-content/components/content-middle.vue';
-import ContentTop from '@/views/business-supervision/business-supervision-content/content-top.vue';
+import ContentTop from '@/views/business-supervision/business-supervision-content/components/content-top.vue';
 </script>
 
 <template>

src/views/business-supervision/business-supervision-left/charts/sidebarMiddle.ts

@@ -0,0 +1,82 @@
+import 'echarts/lib/component/dataZoom';
+
+import type { EChartsOption } from 'echarts';
+import { type Ref, ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+
+const option = ref<EChartsOption>();
+option.value = {
+  tooltip: { trigger: 'item' },
+  grid: { top: 0, left: 0, right: 0, bottom: 0, containLabel: false },
+  series: [
+    {
+      name: '企业',
+      type: 'pie',
+      radius: ['74%', '100%'],
+      avoidLabelOverlap: false,
+      label: { show: false, position: false },
+      labelLine: { show: false },
+      data: [
+        {
+          value: 1048,
+          name: '国营企业',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+              { offset: 0, color: '#0DBBB3' },
+              { offset: 1, color: '#66FFFF' },
+            ]),
+          },
+        },
+        {
+          value: 735,
+          name: '私营企业',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+              { offset: 0, color: '#DEA60F' },
+              { offset: 1, color: '#FFE457' },
+            ]),
+          },
+        },
+      ],
+    },
+    {
+      name: '企业1',
+      type: 'pie',
+      radius: ['54%', '74%'],
+      avoidLabelOverlap: false,
+      label: { show: false, position: false },
+      labelLine: { show: false },
+      data: [
+        {
+          value: 1048,
+          name: '国营企业',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+              { offset: 0, color: '#0DBBB37f' },
+              { offset: 1, color: '#66FFFF7f ' },
+            ]),
+          },
+        },
+        {
+          value: 735,
+          name: '私营企业',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
+              { offset: 0, color: '#DEA60F7F' },
+              { offset: 1, color: '#FFE4577f' },
+            ]),
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+  const myChart = echarts.init(element.value, null, {
+    renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+  myChart.setOption(option.value);
+};

src/views/business-supervision/business-supervision-left/charts/sidebarTop.ts

@@ -0,0 +1,52 @@
+import 'echarts/lib/component/dataZoom';
+
+import type { EChartsOption } from 'echarts';
+import { type Ref, ref } from 'vue';
+
+import echarts from '@/plugins/echarts';
+
+const option = ref<EChartsOption>();
+option.value = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { type: 'shadow' },
+  },
+  grid: { top: 0, left: 0, right: -100, bottom: 0, containLabel: false },
+  xAxis: { show: false, type: 'value' },
+  yAxis: { show: false, type: 'category', data: ['进出口金额'] },
+  series: [
+    {
+      name: '进口额',
+      type: 'bar',
+      barMaxWidth: 23,
+      barGap: '-100%',
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          { offset: 0, color: '#1B3052' },
+          { offset: 1, color: '#32A5DE' },
+        ]),
+      },
+      data: [381],
+    },
+    {
+      name: '出口额',
+      type: 'bar',
+      barMaxWidth: 23,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          { offset: 0, color: '#1B3052' },
+          { offset: 1, color: '#3684F2' },
+        ]),
+      },
+      data: [-158],
+    },
+  ],
+};
+
+export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+  const myChart = echarts.init(element.value, null, {
+    renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+  myChart.setOption(option.value);
+};

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

@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const devices = ref<any>([
+  [
+    { color: '#ff7e5f', title: 738, description: '设备总数1' },
+    { color: '#ff7e5f', title: 738, description: '设备总数' },
+    { color: '#fff', title: 738, description: '设备总数' },
+    { color: '#ff7e5f', title: 738, description: '设备总数' },
+  ],
+  [
+    { color: '#2a65ea', title: '7.3k㎡', description: '设备总数' },
+    { color: '#2a65ea', title: 738, description: '设备总数' },
+    { color: '#fff', title: 738, description: '设备总数' },
+    { color: '#2a65ea', title: 738, description: '设备总数' },
+  ],
+]);
+</script>
+
+<template>
+  <div class="business-supervision__sidebar-item h-[294px]">
+    <div class="flex-x-between">
+      <div class="business-supervision__sidebar-title">
+        <h1>地理规划</h1>
+      </div>
+      <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+    </div>
+    <ul v-for="(parent, pIndex) in devices" :key="pIndex" class="flex-x-around mt-[12px]">
+      <li v-for="(item, index) in parent" :key="index">
+        <div class="manage-device">
+          <h1>{{ item.title.toString() }}</h1>
+          <p>{{ item.description }}</p>
+          <div class="device-carriage">
+            <i :style="{ color: item.color }" class="i-mdi:electricity" />
+          </div>
+        </div>
+        <!--<manage-device :color="item.color" :description="item.description" :title="item.title" />-->
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.manage-device {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 120px;
+
+  h1 {
+    text-align: center;
+    font-size: 24px;
+  }
+
+  p {
+    margin: 0 0 2px 0;
+    text-align: center;
+    font-size: 14px;
+  }
+
+  .device-carriage {
+    display: flex;
+    justify-content: center;
+    width: 74px;
+    height: 46px;
+    background: url('@/assets/images/business-supervision/bg/sidebar/device-carriage.png') no-repeat
+      center;
+    background-size: cover;
+
+    i {
+      font-size: 26px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sidebarMiddle';
+
+const chartPie = ref<HTMLDivElement>();
+
+onMounted(() => {
+  renderEcharts(chartPie);
+});
+</script>
+
+<template>
+  <div class="business-supervision__sidebar-item h-[354px]">
+    <div class="flex-x-between">
+      <div class="business-supervision__sidebar-title">
+        <h1>企业信息</h1>
+      </div>
+      <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+    </div>
+
+    <ul class="business-supervision__sidebar-card">
+      <li>
+        <h1>报税金额</h1>
+        <p class="c-warning-secondary">¥1551154545</p>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <div>
+            <h1>企业数量</h1>
+            <p class="c-primary-secondary">783</p>
+          </div>
+          <div ref="chartPie" class="business-supervision__sidebar-card-chart-pie" />
+        </div>
+        <div class="business-supervision__sidebar-enterprise-type">
+          <span class="mr-[13px]">
+            <i class="bg-primary-secondary" />
+            国营企业 345
+          </span>
+          <span>
+            <i class="bg-warning-secondary" />
+            私营企业 345
+          </span>
+        </div>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <h1>总投资金额</h1>
+          <span class="font-size-[12px]">环比变化</span>
+          <span class="font-size-[12px]">+123%</span>
+        </div>
+        <p class="c-primary-secondary">¥1551154545</p>
+      </li>
+      <li>
+        <div class="flex-x-between">
+          <h1>税收总金额</h1>
+          <span class="font-size-[12px]">环比变化</span>
+          <span class="font-size-[12px]">-123%</span>
+        </div>
+        <p class="c-primary-secondary">¥1551154545</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.business-supervision__sidebar-card {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-content: flex-start;
+  width: 100%;
+  height: 100%;
+
+  li {
+    padding: 9px 16px 0 19px;
+    margin: 15px 0 0 0;
+    width: 242px;
+    height: 124px;
+    background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
+    background-size: cover;
+
+    h1 {
+      margin: 0 0 2px 0;
+      font-size: 18px;
+    }
+
+    p {
+      font-size: 30px;
+    }
+  }
+
+  &-enterprise-type {
+    width: 100%;
+
+    span {
+      font-size: 13px;
+    }
+
+    i {
+      display: inline-block;
+      width: 9px;
+      height: 9px;
+      border-radius: 50%;
+    }
+  }
+
+  &-chart-pie {
+    width: 82px;
+    height: 82px;
+  }
+}
+</style>

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

@@ -0,0 +1,106 @@
+<script lang="tsx" setup>
+import { onMounted, ref } from 'vue';
+
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/TimeSelect/type';
+import formatter from '@/utils/digte-formatter';
+import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sidebarTop';
+
+const chartProgress = ref<HTMLDivElement>();
+const money = ref('1386114');
+
+const timeList = ref<TimeSelectType[]>([
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+  { label: '2020.09', value: '2021' },
+]);
+
+/** 显示金额 */
+const displayContent = () => {
+  formatter(money);
+  return (
+    <>
+      <span>¥</span>
+      {money.value.split('').map((item, index) => (
+        <span key={index}>{item}</span>
+      ))}
+    </>
+  );
+};
+
+onMounted(() => {
+  renderEcharts(chartProgress);
+});
+</script>
+
+<template>
+  <div class="business-supervision__sidebar-item h-[246px]">
+    <div class="flex-x-between">
+      <div class="business-supervision__sidebar-title">
+        <h1>园区进出口额</h1>
+      </div>
+      <div>
+        <span class="business-supervision__sidebar-tag">总数据</span>
+        <TimeSelect :time-list="timeList" />
+      </div>
+    </div>
+
+    <div class="business-supervision__sidebar-money-digit">
+      <component :is="displayContent()" />
+    </div>
+
+    <div>
+      <div ref="chartProgress" class="business-supervision__sidebar-progress" />
+
+      <ul class="business-supervision__sidebar-value flex-x-between">
+        <li>
+          进口额
+          <i>¥1551154545</i>
+        </li>
+        <li class="thin-line h-[20px]" />
+        <li>
+          <i>¥1551154545</i>
+          出口额
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.business-supervision__sidebar {
+  &-money-digit {
+    display: flex;
+    justify-content: end;
+    margin: 26px 0 0 0;
+    color: var(--color-primary-secondary);
+    font-size: 45px;
+    text-align: center;
+
+    span {
+      float: left;
+      margin: 0 3.5px;
+      width: 49px;
+      height: 69px;
+      background: url('@/assets/images/business-supervision/bg/sidebar/bg-count.png') no-repeat;
+      background-size: cover;
+    }
+  }
+
+  &-progress {
+    margin: 21px 0 0 0;
+    width: 495px;
+    height: 23px;
+  }
+
+  &-value {
+    font-size: 18px;
+
+    i {
+      font-style: normal;
+      font-size: 20px;
+      color: var(--color-primary-secondary);
+    }
+  }
+}
+</style>

src/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue

@@ -1,89 +0,0 @@
-<script lang="ts" setup></script>
-
-<template>
-  <ul>
-    <li>
-      <h1>报税金额</h1>
-      <p class="c-warning-secondary">¥1551154545</p>
-    </li>
-    <li>
-      <div class="flex-x-between">
-        <div>
-          <h1>企业数量</h1>
-          <p class="c-primary-secondary">783</p>
-        </div>
-        <div>111</div>
-      </div>
-      <div class="enterprise-type">
-        <span class="mr-[13px]">
-          <i class="bg-primary-secondary" />
-          国营企业 345
-        </span>
-        <span>
-          <i class="bg-warning-secondary" />
-          私营企业 345
-        </span>
-      </div>
-    </li>
-    <li>
-      <div class="flex-x-between">
-        <h1>总投资金额</h1>
-        <span class="font-size-[12px]">环比变化</span>
-        <span class="font-size-[12px]">+123%</span>
-      </div>
-      <p class="c-primary-secondary">¥1551154545</p>
-    </li>
-    <li>
-      <div class="flex-x-between">
-        <h1>税收总金额</h1>
-        <span class="font-size-[12px]">环比变化</span>
-        <span class="font-size-[12px]">-123%</span>
-      </div>
-      <p class="c-primary-secondary">¥1551154545</p>
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" scoped>
-ul {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: flex-start;
-  width: 100%;
-  height: 100%;
-
-  li {
-    padding: 9px 16px 0 19px;
-    margin: 15px 0 0 0;
-    width: 242px;
-    height: 124px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/frame-1.png') no-repeat center;
-    background-size: cover;
-
-    h1 {
-      margin: 0 0 2px 0;
-      font-size: 18px;
-    }
-
-    p {
-      font-size: 30px;
-    }
-  }
-
-  .enterprise-type {
-    width: 100%;
-
-    span {
-      font-size: 13px;
-    }
-
-    i {
-      display: inline-block;
-      width: 9px;
-      height: 9px;
-      border-radius: 50%;
-    }
-  }
-}
-</style>

src/views/business-supervision/business-supervision-left/compontens/import-export-value.vue

@@ -1,74 +0,0 @@
-<script lang="tsx" setup>
-import { ref } from 'vue';
-
-import formatter from '@/utils/digte-formatter';
-
-const money = ref('1386114');
-
-/** 显示金额 */
-const displayContent = () => {
-  formatter(money);
-  return (
-    <>
-      <span>¥</span>
-      {money.value.split('').map((item, index) => (
-        <span key={index}>{item}</span>
-      ))}
-    </>
-  );
-};
-</script>
-
-<template>
-  <div class="money-digit">
-    <component :is="displayContent()" />
-  </div>
-  <div>
-    <div class="progress">111</div>
-    <ul class="import-export-value flex-x-between">
-      <li>
-        进口额
-        <i>¥1551154545</i>
-      </li>
-      <li class="thin-line h-[20px]" />
-      <li>
-        <i>¥1551154545</i>
-        出口额
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.money-digit {
-  display: flex;
-  justify-content: end;
-  margin: 26px 0 0 0;
-  color: var(--color-primary-secondary);
-  font-size: 45px;
-  text-align: center;
-
-  span {
-    float: left;
-    margin: 0 3.5px;
-    width: 49px;
-    height: 69px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/bg-count.png') no-repeat;
-    background-size: cover;
-  }
-}
-
-.progress {
-  margin: 21px 0 0 0;
-}
-
-.import-export-value {
-  font-size: 18px;
-
-  i {
-    font-style: normal;
-    font-size: 20px;
-    color: var(--color-primary-secondary);
-  }
-}
-</style>

src/views/business-supervision/business-supervision-left/compontens/manage-device.vue

@@ -1,53 +0,0 @@
-<script lang="ts" setup>
-import { PropType } from 'vue';
-
-defineProps<{
-  color: PropType<string>;
-  title: PropType<string | number>;
-  description: PropType<string>;
-}>();
-</script>
-
-<template>
-  <div class="manage-device">
-    <h1>{{ title.toString() }}</h1>
-    <p>{{ description }}</p>
-    <div class="device-carriage">
-      <i :style="{ color }" class="i-mdi:electricity" />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.manage-device {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 120px;
-
-  h1 {
-    text-align: center;
-    font-size: 24px;
-  }
-
-  p {
-    margin: 0 0 2px 0;
-    text-align: center;
-    font-size: 14px;
-  }
-
-  .device-carriage {
-    display: flex;
-    justify-content: center;
-    width: 74px;
-    height: 46px;
-    background: url('@/assets/images/business-supervision/bg/sidebar/device-carriage.png') no-repeat
-      center;
-    background-size: cover;
-
-    i {
-      font-size: 26px;
-    }
-  }
-}
-</style>

src/views/business-supervision/business-supervision-left/index.vue

@@ -1,73 +1,13 @@
 <script lang="tsx" setup>
-import { ref } from 'vue';
+import SidebarLeftBottom from '@/views/business-supervision/business-supervision-left/components/sidebar-left-bottom.vue';
-
+import SidebarLeftMiddle from '@/views/business-supervision/business-supervision-left/components/sidebar-left-middle.vue';
-import TimeSelect from '@/components/TimeSelect/index.vue';
+import SidebarLeftTop from '@/views/business-supervision/business-supervision-left/components/sidebar-left-top.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
-import EnterpriseInfo from '@/views/business-supervision/business-supervision-left/compontens/enterprise-info.vue';
-import ImportExportValue from '@/views/business-supervision/business-supervision-left/compontens/import-export-value.vue';
-import ManageDevice from '@/views/business-supervision/business-supervision-left/compontens/manage-device.vue';
-
-const devices = ref<any>([
-  [
-    { color: '#ff7e5f', title: 738, description: '设备总数1' },
-    { color: '#ff7e5f', title: 738, description: '设备总数' },
-    { color: '#fff', title: 738, description: '设备总数' },
-    { color: '#ff7e5f', title: 738, description: '设备总数' },
-  ],
-  [
-    { color: '#2a65ea', title: '7.3k㎡', description: '设备总数' },
-    { color: '#2a65ea', title: 738, description: '设备总数' },
-    { color: '#fff', title: 738, description: '设备总数' },
-    { color: '#2a65ea', title: 738, description: '设备总数' },
-  ],
-]);
-
-const timeList = ref<TimeSelectType[]>([
-  { label: '2020.09', value: '2021' },
-  { label: '2020.09', value: '2021' },
-  { label: '2020.09', value: '2021' },
-]);
 </script>
 
 <template>
   <div class="business-supervision__sidebar">
-    <div class="business-supervision__sidebar-item h-[246px]">
+    <sidebar-left-top />
-      <div class="flex-x-between">
+    <sidebar-left-middle />
-        <div class="business-supervision__sidebar-title">
+    <sidebar-left-bottom />
-          <h1>园区进出口额</h1>
-        </div>
-        <div>
-          <span class="business-supervision__sidebar-tag">总数据</span>
-          <TimeSelect :time-list="timeList" />
-        </div>
-      </div>
-
-      <import-export-value />
-    </div>
-
-    <div class="business-supervision__sidebar-item h-[354px]">
-      <div class="flex-x-between">
-        <div class="business-supervision__sidebar-title">
-          <h1>企业信息</h1>
-        </div>
-        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
-      </div>
-
-      <enterprise-info />
-    </div>
-
-    <div class="business-supervision__sidebar-item h-[294px]">
-      <div class="flex-x-between">
-        <div class="business-supervision__sidebar-title">
-          <h1>地理规划</h1>
-        </div>
-        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
-      </div>
-      <ul v-for="(parent, pIndex) in devices" :key="pIndex" class="flex-x-around mt-[12px]">
-        <li v-for="(item, index) in parent" :key="index">
-          <manage-device :color="item.color" :description="item.description" :title="item.title" />
-        </li>
-      </ul>
-    </div>
   </div>
 </template>

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

@@ -0,0 +1,14 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="business-supervision__sidebar-item h-[294px]">
+    <div class="flex-x-between">
+      <div class="business-supervision__sidebar-title">
+        <h1>地理规划</h1>
+      </div>
+      <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,14 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="business-supervision__sidebar-item h-[354px]">
+    <div class="flex-x-between">
+      <div class="business-supervision__sidebar-title">
+        <h1>企业信息</h1>
+      </div>
+      <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import TimeSelect from '@/components/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/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="business-supervision__sidebar-item h-[246px]">
+    <div class="flex-x-between">
+      <div class="business-supervision__sidebar-title">
+        <h1>园区进出口额</h1>
+      </div>
+
+      <div>
+        <span class="business-supervision__sidebar-tag">总数据</span>
+        <TimeSelect :time-list="timeList" />
+      </div>
+    </div>
+
+    <div class="business-supervision__sidebar-top">
+      <div class="business-supervision__sidebar--spin">
+        <div class="business-supervision__sidebar-describe">
+          <strong>894</strong>
+          <span>维修业务出口总值</span>
+        </div>
+      </div>
+
+      <ul class="business-supervision__sidebar-list">
+        <li>
+          <h1>$ 1.62</h1>
+          <img
+            alt=""
+            src="../../../../assets/images/business-supervision/bg/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"
+          />
+          <p>批准规划面积验收率</p>
+        </li>
+        <li>
+          <h1>$ 1.62</h1>
+          <img
+            alt=""
+            src="../../../../assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
+          />
+          <p>批准规划面积验收率</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.business-supervision__sidebar {
+  &-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 14px 0 0 0;
+  }
+
+  &--spin {
+    width: 167px;
+    height: 167px;
+    background: url('@/assets/images/business-supervision/bg/sidebar/bg-middle-spin.png') no-repeat
+      center;
+    background-size: cover;
+    animation: rotate 2s linear infinite;
+  }
+
+  &-describe {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex: 1;
+    width: 100%;
+    height: 100%;
+    color: var(--color-primary-secondary);
+    font-size: 14px;
+    text-align: center;
+    animation: rotate-reverse 2s linear infinite;
+
+    strong {
+      color: var(--color-primary-secondary-1);
+      font-size: 44px;
+    }
+  }
+
+  .business-supervision__sidebar-list {
+    display: flex;
+    justify-content: space-around;
+    //align-items: center;
+    flex: 1;
+    font-size: 13px;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      h1 {
+        color: var(--color-primary-secondary);
+        font-size: 31px;
+      }
+
+      img {
+        margin: 9px 0 0 0;
+        width: 44px;
+        height: 50px;
+      }
+
+      p {
+        margin: 9px 0 0 0;
+        width: 72px;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/business-supervision/business-supervision-right/index.vue

@@ -1,31 +1,17 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import SidebarRightBottom from '@/views/business-supervision/business-supervision-right/components/sidebar-right-bottom.vue';
+import SidebarRightMiddle from '@/views/business-supervision/business-supervision-right/components/sidebar-right-middle.vue';
+import SidebarRightTop from '@/views/business-supervision/business-supervision-right/components/sidebar-right-top.vue';
+</script>
 
 <template>
   <div class="business-supervision__sidebar flex-y-between">
-    <div class="business-supervision__sidebar-item h-[246px]">
+    <sidebar-right-top />
-      <div class="flex-x-between">
-        <div class="business-supervision__sidebar-title">
-          <h1>园区进出口额</h1>
-        </div>
-      </div>
-    </div>
 
-    <div class="business-supervision__sidebar-item h-[354px]">
+    <sidebar-right-middle />
-      <div class="flex-x-between">
-        <div class="business-supervision__sidebar-title">
-          <h1>企业信息</h1>
-        </div>
-        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
-      </div>
-    </div>
 
-    <div class="business-supervision__sidebar-item h-[294px]">
+    <sidebar-right-bottom />
-      <div class="flex-x-between">
-        <div class="business-supervision__sidebar-title">
-          <h1>地理规划</h1>
-        </div>
-        <span class="business-supervision__sidebar-title-describe">截止时间至2021.12.30</span>
-      </div>
-    </div>
   </div>
 </template>
+
+<style lang="scss" scoped></style>

src/views/business-supervision/style.scss

@@ -46,7 +46,7 @@
 
     &-title-describe {
       font-size: 12px;
-      color: var(--color-info-secondary);
+      color: var(--color-info-secondary-1);
     }
   }
 

src/views/smart-park/index.vue

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

src/views/smart-park/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="../../../../../../assets/images/smart-park/arrow/arrow-item.png"
       />
     </div>
   </div>

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

@@ -1,36 +1,36 @@
 <script lang="ts" setup>
-import CentralItem from '@/views/smart-park/smart-park-main/components/central-item.vue';
+import ContentItem from '@/views/smart-park/smart-park-content/components/smart-park-content/components/content-item.vue';
-import CentralPercent from '@/views/smart-park/smart-park-main/components/central-percent.vue';
+import ContentPercent from '@/views/smart-park/smart-park-content/components/smart-park-content/components/content-percent.vue';
 </script>
 
 <template>
-  <div class="smart-park__center">
+  <div class="smart-park-central">
     <div class="h-[570px] flex-y-between">
-      <div class="smart-park__center-title">
+      <div class="smart-park-central-title">
         <h1>卡口车辆监控</h1>
       </div>
 
       <!-- 中间布局 -->
-      <div class="smart-park__center-inner">
+      <div class="smart-park-central-inner">
         <div class="pos-relative">
-          <central-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
+          <content-item :count="45" class="top-[37px] left-[40px] w-[175px]" door="西北门" />
-          <central-percent :percent="44" class="top-[73px] left-[193px]" />
+          <content-percent :percent="44" class="top-[73px] left-[193px]" />
         </div>
         <div class="pos-relative">
-          <central-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
+          <content-item :count="67" class="top-[37px] left-[120px] w-[175px]" door="东北门" />
-          <central-percent :percent="25" class="top-[73px] right-[192px]" />
+          <content-percent :percent="25" class="top-[73px] right-[192px]" />
         </div>
         <div class="pos-relative">
-          <central-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
+          <content-item :count="345" class="top-[45px] left-[34px] w-[175px]" door="西南门" />
-          <central-percent :percent="25" class="top-[40px] left-[193px]" />
+          <content-percent :percent="25" class="top-[40px] left-[193px]" />
         </div>
         <div class="pos-relative">
-          <central-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
+          <content-item :count="145" class="top-[45px] left-[130px] w-[175px]" door="东南门" />
-          <central-percent :percent="44" class="top-[40px] left-[66px]" />
+          <content-percent :percent="44" class="top-[40px] left-[66px]" />
         </div>
 
-        <div class="smart-park__center-content">
+        <div class="smart-park-central-content">
-          <div class="smart-park__center-content-headline flex-center">
+          <div class="smart-park-central-content-headline flex-center">
             <h1>智能管控</h1>
           </div>
         </div>
@@ -40,7 +40,7 @@ import CentralPercent from '@/views/smart-park/smart-park-main/components/centra
 </template>
 
 <style lang="scss" scoped>
-.smart-park__center {
+.smart-park-central {
   display: flex;
   justify-content: center;
   align-items: center;

src/views/smart-park/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="../../../../../assets/images/smart-park/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="../../../../../assets/images/smart-park/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="../../../../../assets/images/smart-park/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="../../../../../assets/images/smart-park/car/car-1.png" />
           <p>入卡口（东南门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/smart-park/smart-park-main/charts';
+import { renderEcharts } from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-right/charts/charts';
 
 const weekDataChart = ref<HTMLDivElement>();
 

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

@@ -1,13 +1,15 @@
 <script lang="ts" setup>
-import SmartPartCenter from '@/views/smart-park/smart-park-main/smart-park-center.vue';
+import SmartPartContent from '@/views/smart-park/smart-park-content/components/smart-park-content/index.vue';
-import SmartPartSidebarLeft from '@/views/smart-park/smart-park-main/smart-park-sidebar-left.vue';
+import SmartPartSidebarLeft from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-left/index.vue';
-import SmartPartSidebarRight from '@/views/smart-park/smart-park-main/smart-park-sidebar-right.vue';
+import SmartPartSidebarRight from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-right/index.vue';
 </script>
 
 <template>
   <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
     <smart-part-sidebar-left />
-    <smart-part-center />
+    <smart-part-content />
     <smart-part-sidebar-right />
   </main>
 </template>
+
+<style lang="scss" scoped></style>

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