feat: 添加经营动画完成图标

package.json

@@ -18,6 +18,7 @@
     "@unocss/preset-icons": "^66.0.0",
     "@unocss/reset": "^66.0.0",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vueuse/core": "^12.8.2",
     "animate.css": "^4.1.1",
     "autofit.js": "^3.2.4",
     "axios": "^1.7.9",

pnpm-lock.yaml

@@ -26,6 +26,9 @@ importers:
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.1.1
         version: 4.1.1(vite@6.1.1(jiti@2.4.2)(sass@1.85.0)(terser@5.39.0))(vue@3.5.13(typescript@5.7.3))
+      '@vueuse/core':
+        specifier: ^12.8.2
+        version: 12.8.2(typescript@5.7.3)
       animate.css:
         specifier: ^4.1.1
         version: 4.1.1
@@ -815,6 +818,9 @@ packages:
   '@types/tinycolor2@1.4.6':
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
 
+  '@types/web-bluetooth@0.0.21':
+    resolution: {integrity: sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==}
+
   '@typescript-eslint/eslint-plugin@8.24.1':
     resolution: {integrity: sha512-ll1StnKtBigWIGqvYDVuDmXJHVH4zLVot1yQ4fJtLpL7qacwkxJc1T0bptqw+miBQ/QfUbhl1TcQ4accW5KUyA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1038,6 +1044,15 @@ packages:
       vue:
         optional: true
 
+  '@vueuse/core@12.8.2':
+    resolution: {integrity: sha512-HbvCmZdzAu3VGi/pWYm5Ut+Kd9mn1ZHnn4L5G8kOQTPs/IwIAmJoBrmYk2ckLArgMXZj0AW3n5CAejLUO+PhdQ==}
+
+  '@vueuse/metadata@12.8.2':
+    resolution: {integrity: sha512-rAyLGEuoBJ/Il5AmFHiziCPdQzRt88VxR+Y/A/QhJ1EWtWqPBBAxTAFaSkviwEuOEZNtW8pvkPgoCZQ+HxqW1A==}
+
+  '@vueuse/shared@12.8.2':
+    resolution: {integrity: sha512-dznP38YzxZoNloI0qpEfpkms8knDtaoQ6Y/sfS0L7Yki4zh40LFHEhur0odJC6xTHG5dxWVPiUWBXn+wCG2s5w==}
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -3191,6 +3206,8 @@ snapshots:
 
   '@types/tinycolor2@1.4.6': {}
 
+  '@types/web-bluetooth@0.0.21': {}
+
   '@typescript-eslint/eslint-plugin@8.24.1(@typescript-eslint/parser@8.24.1(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3))(eslint@9.21.0(jiti@2.4.2))(typescript@5.7.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -3549,6 +3566,23 @@ snapshots:
       typescript: 5.7.3
       vue: 3.5.13(typescript@5.7.3)
 
+  '@vueuse/core@12.8.2(typescript@5.7.3)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.21
+      '@vueuse/metadata': 12.8.2
+      '@vueuse/shared': 12.8.2(typescript@5.7.3)
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/metadata@12.8.2': {}
+
+  '@vueuse/shared@12.8.2(typescript@5.7.3)':
+    dependencies:
+      vue: 3.5.13(typescript@5.7.3)
+    transitivePeerDependencies:
+      - typescript
+
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0

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

@@ -1,14 +1,21 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
+import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sideBottom';
+
+const chartYear = ref();
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
   { label: '2020.09', value: '2021' },
   { label: '2020.09', value: '2021' },
 ]);
+
+onMounted(() => {
+  renderEcharts(chartYear);
+});
 </script>
 
 <template>
@@ -21,6 +28,8 @@ const timeList = ref<TimeSelectType[]>([
         </div>
         <TimeSelect :time-list="timeList" />
       </div>
+
+      <div ref="chartYear" class="business-supervision__bottom-chart" />
     </div>
   </div>
 </template>
@@ -54,5 +63,10 @@ const timeList = ref<TimeSelectType[]>([
       font-size: 12px;
     }
   }
+
+  &-chart {
+    width: 100%;
+    height: 197px;
+  }
 }
 </style>

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

@@ -5,7 +5,7 @@
     <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">
@@ -16,7 +16,7 @@
     <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">
@@ -27,7 +27,7 @@
     <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">
@@ -38,7 +38,7 @@
     <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">
@@ -70,6 +70,7 @@
       width: 162px;
       height: 183px;
       object-fit: cover;
+      animation: shakeY 4s ease-in-out infinite;
     }
 
     h2 {

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

@@ -0,0 +1,84 @@
+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';
+
+const option = ref<EChartsOption>();
+option.value = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow',
+      shadowStyle: {
+        shadowColor: '#66FFFF',
+        shadowBlur: 10,
+      },
+    },
+  },
+  grid: { top: '9%', right: '0%', left: '6%', bottom: '9%', containLabel: false },
+  xAxis: [
+    {
+      type: 'category',
+      data: [
+        '2021.01',
+        '2021.02',
+        '2021.03',
+        '2021.04',
+        '2021.05',
+        '2021.06',
+        '2021.07',
+        '2021.08',
+        '2021.09',
+        '2021.10',
+        '2021.11',
+        '2021.12',
+      ],
+      axisTick: { alignWithLabel: true },
+    },
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      splitLine: {
+        show: true,
+        lineStyle: { type: 'solid', color: '#707070', width: 2 },
+      },
+    },
+  ],
+  series: [
+    {
+      name: 'Direct',
+      type: 'bar',
+      barWidth: '40%',
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#00CCD2' },
+          { offset: 1, color: '#00A2FF' },
+        ]),
+        emphasis: {
+          shadowBlur: 10, // 取消阴影模糊
+          shadowColor: '#000', // 取消阴影颜色
+        },
+      },
+      label: { show: true, position: 'top', color: '#fff', fontSize: 14 },
+      data: [10, 52, 200, 334, 390, 330, 220, 500, 482, 499, 999, 444],
+    },
+  ],
+};
+
+export const renderEcharts = (element: Ref<HTMLDivElement>) => {
+  const myChart = echarts.init(element.value, null, {
+    renderer: 'svg',
+    devicePixelRatio: window.devicePixelRatio,
+  });
+
+  const debouncedFn = useDebounceFn(() => {
+    myChart.resize();
+  }, 1000);
+  useEventListener(window, 'resize', debouncedFn);
+
+  myChart.setOption(option.value);
+};

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

@@ -1,5 +1,6 @@
 import 'echarts/lib/component/dataZoom';
 
+import { useDebounceFn, useEventListener } from '@vueuse/core';
 import type { EChartsOption } from 'echarts';
 import { type Ref, ref } from 'vue';
 
@@ -17,10 +18,15 @@ option.value = {
       avoidLabelOverlap: false,
       label: { show: false, position: false },
       labelLine: { show: false },
+      emphasis: {
+        disabled: true, // 禁用 emphasis 状态
+        scale: false, // 禁用放大效果
+        scaleSize: 0, // 将放大尺寸设置为 0
+      },
       data: [
         {
           value: 1048,
-          name: '国营企业',
+          name: '国营',
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
               { offset: 0, color: '#0DBBB3' },
@@ -30,7 +36,7 @@ option.value = {
         },
         {
           value: 735,
-          name: '私营企业',
+          name: '私营',
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
               { offset: 0, color: '#DEA60F' },
@@ -41,16 +47,21 @@ option.value = {
       ],
     },
     {
-      name: '企业1',
+      name: '企业',
       type: 'pie',
       radius: ['54%', '74%'],
       avoidLabelOverlap: false,
       label: { show: false, position: false },
       labelLine: { show: false },
+      emphasis: {
+        disabled: true, // 禁用 emphasis 状态
+        scale: false, // 禁用放大效果
+        scaleSize: 0, // 将放大尺寸设置为 0
+      },
       data: [
         {
           value: 1048,
-          name: '国营企业',
+          name: '国营',
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
               { offset: 0, color: '#0DBBB37f' },
@@ -60,7 +71,7 @@ option.value = {
         },
         {
           value: 735,
-          name: '私营企业',
+          name: '私营',
           itemStyle: {
             color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
               { offset: 0, color: '#DEA60F7F' },
@@ -78,5 +89,11 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     renderer: 'svg',
     devicePixelRatio: window.devicePixelRatio,
   });
+
+  const debouncedFn = useDebounceFn(() => {
+    myChart.resize();
+  }, 1000);
+  useEventListener(window, 'resize', debouncedFn);
+
   myChart.setOption(option.value);
 };

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

@@ -1,5 +1,6 @@
 import 'echarts/lib/component/dataZoom';
 
+import { useDebounceFn, useEventListener } from '@vueuse/core';
 import type { EChartsOption } from 'echarts';
 import { type Ref, ref } from 'vue';
 
@@ -48,5 +49,11 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     renderer: 'svg',
     devicePixelRatio: window.devicePixelRatio,
   });
+
+  const debouncedFn = useDebounceFn(() => {
+    myChart.resize();
+  }, 1000);
+  useEventListener(window, 'resize', debouncedFn);
+
   myChart.setOption(option.value);
 };

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

@@ -6,13 +6,13 @@ 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: '#08D9F1', title: 738, description: '设备总数' },
   ],
   [
-    { color: '#2a65ea', title: '7.3k㎡', description: '设备总数' },
+    { color: '#ff7e5f', title: '7.3k㎡', description: '设备总数' },
     { color: '#2a65ea', title: 738, description: '设备总数' },
     { color: '#fff', title: 738, description: '设备总数' },
-    { color: '#2a65ea', title: 738, description: '设备总数' },
+    { color: '#08D9F1', title: 738, description: '设备总数' },
   ],
 ]);
 </script>
@@ -28,13 +28,12 @@ const devices = ref<any>([
     <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>
+          <h1 :style="{ color: item.color }">{{ 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>

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

@@ -32,7 +32,7 @@ onMounted(() => {
           </div>
           <div ref="chartPie" class="business-supervision__sidebar-card-chart-pie" />
         </div>
-        <div class="business-supervision__sidebar-enterprise-type">
+        <div class="business-supervision__sidebar-card-enterprise-type">
           <span class="mr-[13px]">
             <i class="bg-primary-secondary" />
             国营企业 345
@@ -91,6 +91,7 @@ onMounted(() => {
   }
 
   &-enterprise-type {
+    margin: 4px 0 0 0;
     width: 100%;
 
     span {

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

@@ -37,7 +37,7 @@ const timeList = ref<TimeSelectType[]>([
           <h1>$ 1.62</h1>
           <img
             alt=""
-            src="../../../../assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
+            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
           />
           <p>批准规划面积验收率</p>
         </li>
@@ -45,7 +45,7 @@ const timeList = ref<TimeSelectType[]>([
           <h1>$ 1.62</h1>
           <img
             alt=""
-            src="../../../../assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
+            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
           />
           <p>批准规划面积验收率</p>
         </li>
@@ -53,7 +53,7 @@ const timeList = ref<TimeSelectType[]>([
           <h1>$ 1.62</h1>
           <img
             alt=""
-            src="../../../../assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
+            src="@/assets/images/business-supervision/bg/sidebar/bg-middle-coordinate.png"
           />
           <p>批准规划面积验收率</p>
         </li>
@@ -119,6 +119,7 @@ const timeList = ref<TimeSelectType[]>([
         margin: 9px 0 0 0;
         width: 44px;
         height: 50px;
+        animation: bounce 4s ease-in-out infinite;
       }
 
       p {

src/views/smart-park/smart-park-content/components/smart-park-sidebar-right/charts/charts.ts

@@ -1,5 +1,6 @@
 import 'echarts/lib/component/dataZoom';
 
+import { useDebounceFn, useEventListener } from '@vueuse/core';
 import type { EChartsOption } from 'echarts';
 import { type Ref, ref } from 'vue';
 
@@ -100,5 +101,11 @@ export const renderEcharts = (element: Ref<HTMLDivElement>) => {
     renderer: 'svg',
     devicePixelRatio: window.devicePixelRatio,
   });
+
+  const debouncedFn = useDebounceFn(() => {
+    myChart.resize();
+  }, 1000);
+  useEventListener(window, 'resize', debouncedFn);
+
   myChart.setOption(option.value);
 };