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

2025-03-08 21:57:09 +08:00 · 2025-03-08 21:57:09 +08:00 · 74925fabbc
parent a84dc55486
commit 74925fabbc
11 changed files with 185 additions and 19 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
--- a/src/views/business-supervision/business-supervision-content/components/content-bottom.vue
+++ b/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>
--- a/src/views/business-supervision/business-supervision-content/components/content-middle.vue
+++ b/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 {
--- a/src/views/business-supervision/business-supervision-left/charts/sideBottom.ts
+++ b/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);
+};
--- a/src/views/business-supervision/business-supervision-left/charts/sidebarMiddle.ts
+++ b/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);
 };
--- a/src/views/business-supervision/business-supervision-left/charts/sidebarTop.ts
+++ b/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);
 };
--- a/src/views/business-supervision/business-supervision-left/components/sidebar-left-bottom.vue
+++ b/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>
--- a/src/views/business-supervision/business-supervision-left/components/sidebar-left-middle.vue
+++ b/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 {
--- a/src/views/business-supervision/business-supervision-right/components/sidebar-right-top.vue
+++ b/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 {
--- a/src/views/smart-park/smart-park-content/components/smart-park-sidebar-right/charts/charts.ts
+++ b/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);
 };