From 74925fabbcfbb007fdc6dcaeaad3177286a46364 Mon Sep 17 00:00:00 2001 From: Bunny <1319900154@qq.com> Date: Sat, 8 Mar 2025 21:57:09 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=BB=8F=E8=90=A5?= =?UTF-8?q?=E5=8A=A8=E7=94=BB=E5=AE=8C=E6=88=90=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 34 ++++++++ .../components/content-bottom.vue | 16 +++- .../components/content-middle.vue | 9 +- .../charts/sideBottom.ts | 84 +++++++++++++++++++ .../charts/sidebarMiddle.ts | 27 ++++-- .../charts/sidebarTop.ts | 7 ++ .../components/sidebar-left-bottom.vue | 9 +- .../components/sidebar-left-middle.vue | 3 +- .../components/sidebar-right-top.vue | 7 +- .../smart-park-sidebar-right/charts/charts.ts | 7 ++ 11 files changed, 185 insertions(+), 19 deletions(-) create mode 100644 src/views/business-supervision/business-supervision-left/charts/sideBottom.ts diff --git a/package.json b/package.json index b97daa8..1c76f26 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee482b4..78db805 100644 --- 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 diff --git a/src/views/business-supervision/business-supervision-content/components/content-bottom.vue b/src/views/business-supervision/business-supervision-content/components/content-bottom.vue index b1c34a3..697a000 100644 --- 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 @@ @@ -54,5 +63,10 @@ const timeList = ref([ font-size: 12px; } } + + &-chart { + width: 100%; + height: 197px; + } } diff --git a/src/views/business-supervision/business-supervision-content/components/content-middle.vue b/src/views/business-supervision/business-supervision-content/components/content-middle.vue index 5e49f77..51fbc8f 100644 --- 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 @@
  • bg-middle-1

    员工

    @@ -16,7 +16,7 @@
  • bg-middle-2

    智慧大楼

    @@ -27,7 +27,7 @@
  • bg-middle-3

    智慧设备

    @@ -38,7 +38,7 @@
  • bg-middle-3

    数据报表

    @@ -70,6 +70,7 @@ width: 162px; height: 183px; object-fit: cover; + animation: shakeY 4s ease-in-out infinite; } h2 { diff --git a/src/views/business-supervision/business-supervision-left/charts/sideBottom.ts b/src/views/business-supervision/business-supervision-left/charts/sideBottom.ts new file mode 100644 index 0000000..35fe0c2 --- /dev/null +++ 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(); +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) => { + 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); +}; diff --git a/src/views/business-supervision/business-supervision-left/charts/sidebarMiddle.ts b/src/views/business-supervision/business-supervision-left/charts/sidebarMiddle.ts index a736b09..de1a344 100644 --- 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) => { renderer: 'svg', devicePixelRatio: window.devicePixelRatio, }); + + const debouncedFn = useDebounceFn(() => { + myChart.resize(); + }, 1000); + useEventListener(window, 'resize', debouncedFn); + myChart.setOption(option.value); }; diff --git a/src/views/business-supervision/business-supervision-left/charts/sidebarTop.ts b/src/views/business-supervision/business-supervision-left/charts/sidebarTop.ts index 04c96f1..11094a3 100644 --- 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) => { renderer: 'svg', devicePixelRatio: window.devicePixelRatio, }); + + const debouncedFn = useDebounceFn(() => { + myChart.resize(); + }, 1000); + useEventListener(window, 'resize', debouncedFn); + myChart.setOption(option.value); }; diff --git 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 index 0176be8..da073e7 100644 --- 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([ { 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: '设备总数' }, ], ]); @@ -28,13 +28,12 @@ const devices = ref([
    • -

      {{ item.title.toString() }}

      +

      {{ item.title.toString() }}

      {{ item.description }}

      -
    diff --git 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 index 5d47f78..79ec531 100644 --- 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(() => {
    -
    +
    国营企业 345 @@ -91,6 +91,7 @@ onMounted(() => { } &-enterprise-type { + margin: 4px 0 0 0; width: 100%; span { diff --git 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 index 04a9a0f..f2744dd 100644 --- 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([

    $ 1.62

    批准规划面积验收率

    • @@ -45,7 +45,7 @@ const timeList = ref([

    $ 1.62

    批准规划面积验收率

    @@ -53,7 +53,7 @@ const timeList = ref([

    $ 1.62

    批准规划面积验收率

    @@ -119,6 +119,7 @@ const timeList = ref([ margin: 9px 0 0 0; width: 44px; height: 50px; + animation: bounce 4s ease-in-out infinite; } p { diff --git 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 index bcb94ac..2ecb1e7 100644 --- 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) => { renderer: 'svg', devicePixelRatio: window.devicePixelRatio, }); + + const debouncedFn = useDebounceFn(() => { + myChart.resize(); + }, 1000); + useEventListener(window, 'resize', debouncedFn); + myChart.setOption(option.value); };