refactor: 优化代码

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插件 */

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%;
+  }
 }

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>,

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
+  );
+};

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 TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+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>
+    <ul class="big-data__body">
-        <div class="big-data__left-main-title">
+      <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>

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 TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },

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>

src/views/big-data/style.scss

@@ -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%;
-  }
-}

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(() => {
+  debounceChart(myChart);
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
 
   myChart.setOption(option.value);
 };

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(() => {
+  debounceChart(myChart);
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
 
   myChart.setOption(option.value);
 };

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(() => {
+  debounceChart(myChart);
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
 
   myChart.setOption(option.value);
 };

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 TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
-import { renderEcharts } from '@/views/business-supervision/components/business-supervision-content/charts/contentBottom';
+import { renderEcharts } from '@/views/business-supervision/charts/contentBottom';
 
 const chartYear = ref();
 

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>();
 

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

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;

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 TimeSelect from '@/components/PanelItem/TimeSelect/index.vue';
-import { TimeSelectType } from '@/components/TimeSelect/type';
+import { TimeSelectType } from '@/components/PanelItem/TimeSelect/type';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },

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>

src/views/business-supervision/style.scss

@@ -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%;
-  }
-}
-

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(() => {
+  debounceChart(myChart);
-    myChart.resize();
-  }, 1000);
-  useEventListener(window, 'resize', debouncedFn);
 
   myChart.setOption(option.value);
 };

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>();