From 47d4d1055c4e8c1585e8e41a37d21efc36ec3ac7 Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Wed, 12 Mar 2025 09:42:48 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 build/css.ts                                  |  8 ++++++-
 .../styles/{common/src => minix}/sidebar.scss |  9 +++++--
 .../{ => PanelItem}/TimeSelect/index.vue      |  2 +-
 .../{ => PanelItem}/TimeSelect/type.ts        |  0
 src/utils/chart.ts                            | 14 +++++++++++
 .../big-data-left/components/left-top.vue     | 24 ++++++++++++-------
 .../big-data-right/components/right-top.vue   |  4 ++--
 src/views/big-data/index.vue                  | 11 ++++++++-
 src/views/big-data/style.scss                 | 17 -------------
 .../charts/contentBottom.ts                   |  7 ++----
 .../leftSidebarMiddle.ts}                     |  7 ++----
 .../leftSidebarTop.ts}                        |  7 ++----
 .../right-bottom-chart.vue}                   |  0
 .../components/content-bottom.vue             |  6 ++---
 .../components/sidebar-left-middle.vue        |  2 +-
 .../components/sidebar-left-top.vue           |  6 ++---
 .../components/sidebar-right-bottom.vue       |  6 ++++-
 .../components/sidebar-right-top.vue          |  4 ++--
 src/views/business-supervision/index.vue      | 11 ++++++++-
 src/views/business-supervision/style.scss     | 18 --------------
 .../charts.ts => charts/right-sidebar.ts}     |  7 ++----
 .../smart-park-sidebar-right/index.vue        |  2 +-
 22 files changed, 90 insertions(+), 82 deletions(-)
 rename src/assets/styles/{common/src => minix}/sidebar.scss (85%)
 rename src/components/{ => PanelItem}/TimeSelect/index.vue (88%)
 rename src/components/{ => PanelItem}/TimeSelect/type.ts (100%)
 create mode 100644 src/utils/chart.ts
 delete mode 100644 src/views/big-data/style.scss
 rename src/views/business-supervision/{components/business-supervision-content => }/charts/contentBottom.ts (90%)
 rename src/views/business-supervision/{components/business-supervision-left/charts/sidebarMiddle.ts => charts/leftSidebarMiddle.ts} (92%)
 rename src/views/business-supervision/{components/business-supervision-left/charts/sidebarTop.ts => charts/leftSidebarTop.ts} (87%)
 rename src/views/business-supervision/{components/business-supervision-right/chart/bottom-chart.vue => charts/right-bottom-chart.vue} (100%)
 delete mode 100644 src/views/business-supervision/style.scss
 rename src/views/smart-park/{components/smart-park-content/components/smart-park-sidebar-right/charts/charts.ts => charts/right-sidebar.ts} (93%)

diff --git a/build/css.ts b/build/css.ts
index 818e645..4e4e919 100644
--- a/build/css.ts
+++ b/build/css.ts
@@ -7,10 +7,16 @@ export const css = (mode): CSSOptions => {
   const plugins: Plugin[] = [usePostCssPxToViewport8plugin(mode)];
 
   return {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "@/assets/styles/minix/sidebar" as  *;`,
+        api: 'modern-compiler',
+      },
+    },
     postcss: {
       plugins: plugins.filter(Boolean),
     },
-  };
+  } as CSSOptions;
 };
 
 /** 是否启用px转换vw插件 */
diff --git a/src/assets/styles/common/src/sidebar.scss b/src/assets/styles/minix/sidebar.scss
similarity index 85%
rename from src/assets/styles/common/src/sidebar.scss
rename to src/assets/styles/minix/sidebar.scss
index 551f179..31b1e23 100644
--- a/src/assets/styles/common/src/sidebar.scss
+++ b/src/assets/styles/minix/sidebar.scss
@@ -1,11 +1,11 @@
-@mixin sidebar-1() {
+@mixin view-style-default($sidebar-width,$content-width) {
   &__sidebar {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
-    width: 530px;
+    width: $sidebar-width;
     height: 100%;
     color: #fff;
 
@@ -42,4 +42,9 @@
       color: var(--color-info-secondary-1);
     }
   }
+
+  &__content {
+    width: $content-width;
+    height: 100%;
+  }
 }
diff --git a/src/components/TimeSelect/index.vue b/src/components/PanelItem/TimeSelect/index.vue
similarity index 88%
rename from src/components/TimeSelect/index.vue
rename to src/components/PanelItem/TimeSelect/index.vue
index 5ec0536..046dbde 100644
--- a/src/components/TimeSelect/index.vue
+++ b/src/components/PanelItem/TimeSelect/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
 defineProps({
   timeList: Array<TimeSelectType>,
diff --git a/src/components/TimeSelect/type.ts b/src/components/PanelItem/TimeSelect/type.ts
similarity index 100%
rename from src/components/TimeSelect/type.ts
rename to src/components/PanelItem/TimeSelect/type.ts
diff --git a/src/utils/chart.ts b/src/utils/chart.ts
new file mode 100644
index 0000000..749c271
--- /dev/null
+++ b/src/utils/chart.ts
@@ -0,0 +1,14 @@
+import { useEventListener } from '@vueuse/core';
+import type { EChartsType } from 'echarts';
+
+/** 通用重置图表样式 */
+export const debounceChart = (myChart: EChartsType) => {
+  useEventListener(
+    window,
+    'resize',
+    () => {
+      myChart.resize();
+    },
+    500
+  );
+};
diff --git a/src/views/big-data/components/big-data-left/components/left-top.vue b/src/views/big-data/components/big-data-left/components/left-top.vue
index ee5c63a..ccc400d 100644
--- a/src/views/big-data/components/big-data-left/components/left-top.vue
+++ b/src/views/big-data/components/big-data-left/components/left-top.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
@@ -22,9 +22,10 @@ const timeList = ref<TimeSelectType[]>([
         <TimeSelect :time-list="timeList" />
       </div>
     </div>
-    <ul>
-      <li>
-        <div class="big-data__left-main-title">
+
+    <ul class="big-data__body">
+      <li class="big-data__body-item">
+        <div class="big-data__body-title">
           <h1>进出口总值</h1>
           <span>
             总值增幅
@@ -37,22 +38,29 @@ const timeList = ref<TimeSelectType[]>([
 </template>
 
 <style lang="scss" scoped>
-ul {
+.big-data__body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
+  height: 100%;
 
-  li {
+  &-item {
     display: flex;
     justify-content: center;
+    align-items: center;
+    margin: 18px 15px;
     width: 100%;
   }
 
-  .big-data__left-main-title {
+  &-title {
     display: flex;
     justify-content: space-between;
     width: 100%;
+
+    em {
+      font-style: normal;
+    }
   }
 }
 </style>
diff --git a/src/views/big-data/components/big-data-right/components/right-top.vue b/src/views/big-data/components/big-data-right/components/right-top.vue
index b7ec083..a407947 100644
--- a/src/views/big-data/components/big-data-right/components/right-top.vue
+++ b/src/views/big-data/components/big-data-right/components/right-top.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
diff --git a/src/views/big-data/index.vue b/src/views/big-data/index.vue
index c6d4f10..46e7da4 100644
--- a/src/views/big-data/index.vue
+++ b/src/views/big-data/index.vue
@@ -13,5 +13,14 @@ import BigDataRight from '@/views/big-data/components/big-data-right/index.vue';
 </template>
 
 <style lang="scss">
-@use 'style';
+.big-data {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  @include view-style-default(530px, 748px);
+}
 </style>
diff --git a/src/views/big-data/style.scss b/src/views/big-data/style.scss
deleted file mode 100644
index a5aac7e..0000000
--- a/src/views/big-data/style.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use "@/assets/styles/common/src/sidebar" as  *;
-
-.big-data {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 19px 25px;
-  width: 100%;
-  height: 100%;
-
-  @include sidebar-1();
-
-  &__content {
-    width: 748px;
-    height: 100%;
-  }
-}
\ No newline at end of file
diff --git a/src/views/business-supervision/components/business-supervision-content/charts/contentBottom.ts b/src/views/business-supervision/charts/contentBottom.ts
similarity index 90%
rename from src/views/business-supervision/components/business-supervision-content/charts/contentBottom.ts
rename to src/views/business-supervision/charts/contentBottom.ts
index 0368790..a721066 100644
--- a/src/views/business-supervision/components/business-supervision-content/charts/contentBottom.ts
+++ b/src/views/business-supervision/charts/contentBottom.ts
@@ -1,10 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
-import { useDebounceFn, useEventListener } from '@vueuse/core';
 import type { EChartsOption } from 'echarts';
 import { type Ref, ref } from 'vue';
 
 import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
 
 const option = ref<EChartsOption>();
 option.value = {
@@ -69,10 +69,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     devicePixelRatio: window.devicePixelRatio,
   });
 
-  const debouncedFn = useDebounceFn(() => {
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
+  debounceChart(myChart);
 
   myChart.setOption(option.value);
 };
diff --git a/src/views/business-supervision/components/business-supervision-left/charts/sidebarMiddle.ts b/src/views/business-supervision/charts/leftSidebarMiddle.ts
similarity index 92%
rename from src/views/business-supervision/components/business-supervision-left/charts/sidebarMiddle.ts
rename to src/views/business-supervision/charts/leftSidebarMiddle.ts
index de1a344..4df42be 100644
--- a/src/views/business-supervision/components/business-supervision-left/charts/sidebarMiddle.ts
+++ b/src/views/business-supervision/charts/leftSidebarMiddle.ts
@@ -1,10 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
-import { useDebounceFn, useEventListener } from '@vueuse/core';
 import type { EChartsOption } from 'echarts';
 import { type Ref, ref } from 'vue';
 
 import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
 
 const option = ref<EChartsOption>();
 option.value = {
@@ -90,10 +90,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     devicePixelRatio: window.devicePixelRatio,
   });
 
-  const debouncedFn = useDebounceFn(() => {
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
+  debounceChart(myChart);
 
   myChart.setOption(option.value);
 };
diff --git a/src/views/business-supervision/components/business-supervision-left/charts/sidebarTop.ts b/src/views/business-supervision/charts/leftSidebarTop.ts
similarity index 87%
rename from src/views/business-supervision/components/business-supervision-left/charts/sidebarTop.ts
rename to src/views/business-supervision/charts/leftSidebarTop.ts
index 11094a3..cced960 100644
--- a/src/views/business-supervision/components/business-supervision-left/charts/sidebarTop.ts
+++ b/src/views/business-supervision/charts/leftSidebarTop.ts
@@ -1,10 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
-import { useDebounceFn, useEventListener } from '@vueuse/core';
 import type { EChartsOption } from 'echarts';
 import { type Ref, ref } from 'vue';
 
 import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
 
 const option = ref<EChartsOption>();
 option.value = {
@@ -50,10 +50,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     devicePixelRatio: window.devicePixelRatio,
   });
 
-  const debouncedFn = useDebounceFn(() => {
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
+  debounceChart(myChart);
 
   myChart.setOption(option.value);
 };
diff --git a/src/views/business-supervision/components/business-supervision-right/chart/bottom-chart.vue b/src/views/business-supervision/charts/right-bottom-chart.vue
similarity index 100%
rename from src/views/business-supervision/components/business-supervision-right/chart/bottom-chart.vue
rename to src/views/business-supervision/charts/right-bottom-chart.vue
diff --git a/src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue b/src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue
index d784213..fd166f0 100644
--- a/src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue
+++ b/src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
-import { renderEcharts } from '@/views/business-supervision/components/business-supervision-content/charts/contentBottom';
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { renderEcharts } from '@/views/business-supervision/charts/contentBottom';
 
 const chartYear = ref();
 
diff --git a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue
index e68e1aa..bb90788 100644
--- a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue
+++ b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/business-supervision/components/business-supervision-left/charts/sidebarMiddle';
+import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarMiddle';
 
 const chartPie = ref<HTMLDivElement>();
 
diff --git a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
index aeafdcc..0d209ff 100644
--- a/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
+++ b/src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue
@@ -2,9 +2,9 @@
 import { onMounted, ref } from 'vue';
 
 import { displayContent } from '@/components/PanelItem/DigitalNumber';
-import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
-import { renderEcharts } from '@/views/business-supervision/components/business-supervision-left/charts/sidebarTop';
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
+import { renderEcharts } from '@/views/business-supervision/charts/leftSidebarTop';
 
 const chartProgress = ref<HTMLDivElement>();
 const money = '1386114';
diff --git a/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue b/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue
index d3459d1..ffb80a1 100644
--- a/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue
+++ b/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import BottomChart from '@/views/business-supervision/components/business-supervision-right/chart/bottom-chart.vue';
+import BottomChart from '@/views/business-supervision/charts/right-bottom-chart.vue';
 
 const charData1 = ref(Math.round(Math.random() * 100));
 const charData2 = ref(Math.round(Math.random() * 100));
@@ -99,6 +99,10 @@ onMounted(() => {
     &-change {
       display: flex;
 
+      p {
+        font-size: 13px;
+      }
+
       span {
         display: inline-block;
         margin: 0 0 0 9px;
diff --git a/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue b/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue
index f2744dd..7ef3943 100644
--- a/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue
+++ b/src/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-import TimeSelect from '@/components/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
diff --git a/src/views/business-supervision/index.vue b/src/views/business-supervision/index.vue
index 2c72af4..86bb548 100644
--- a/src/views/business-supervision/index.vue
+++ b/src/views/business-supervision/index.vue
@@ -13,5 +13,14 @@ import BusinessSupervisionRight from '@/views/business-supervision/components/bu
 </template>
 
 <style lang="scss">
-@use 'style.scss';
+.business-supervision {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 19px 25px;
+  width: 100%;
+  height: 100%;
+
+  @include view-style-default(530px, 759px);
+}
 </style>
diff --git a/src/views/business-supervision/style.scss b/src/views/business-supervision/style.scss
deleted file mode 100644
index ee40e81..0000000
--- a/src/views/business-supervision/style.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@use "@/assets/styles/common/src/sidebar" as  *;
-
-.business-supervision {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 19px 25px;
-  width: 100%;
-  height: 100%;
-
-  @include sidebar-1();
-
-  &__content {
-    width: 759px;
-    height: 100%;
-  }
-}
-
diff --git a/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/charts/charts.ts b/src/views/smart-park/charts/right-sidebar.ts
similarity index 93%
rename from src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/charts/charts.ts
rename to src/views/smart-park/charts/right-sidebar.ts
index 2ecb1e7..cc0b3ed 100644
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/charts/charts.ts
+++ b/src/views/smart-park/charts/right-sidebar.ts
@@ -1,10 +1,10 @@
 import 'echarts/lib/component/dataZoom';
 
-import { useDebounceFn, useEventListener } from '@vueuse/core';
 import type { EChartsOption } from 'echarts';
 import { type Ref, ref } from 'vue';
 
 import echarts from '@/plugins/echarts';
+import { debounceChart } from '@/utils/chart';
 
 const option = ref<EChartsOption>();
 option.value = {
@@ -102,10 +102,7 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     devicePixelRatio: window.devicePixelRatio,
   });
 
-  const debouncedFn = useDebounceFn(() => {
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
+  debounceChart(myChart);
 
   myChart.setOption(option.value);
 };
diff --git a/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue b/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue
index 96ce605..ada6f9b 100644
--- a/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue
+++ b/src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/charts/charts';
+import { renderEcharts } from '@/views/smart-park/charts/right-sidebar';
 
 const weekDataChart = ref<HTMLDivElement>();