From 1a8c712487862728f086bbaa3a2fa766508a5ea3 Mon Sep 17 00:00:00 2001 From: JINGYJ <1458671527@qq.com> Date: Mon, 10 Mar 2025 17:55:06 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E6=80=BB=E8=A7=88?= =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 9 + src/assets/svg/deviceStatus/error.svg | 10 + src/assets/svg/deviceStatus/online.svg | 6 + src/assets/svg/deviceStatus/outline.svg | 3 + src/views/dashboard/AppearanceMonitor.vue | 290 ++++++++++----- src/views/dashboard/DataOverview.scss | 2 + src/views/dashboard/DataOverview.vue | 330 ++++++++---------- src/views/dashboard/components/BarChart.vue | 320 +++++++++++++++++ .../dashboard/components/DeviceStatus.vue | 103 ++++++ src/views/dashboard/components/PieChart.vue | 92 +++++ .../dashboard/components/PieChartSmall.vue | 92 +++++ 12 files changed, 987 insertions(+), 271 deletions(-) create mode 100644 src/assets/svg/deviceStatus/error.svg create mode 100644 src/assets/svg/deviceStatus/online.svg create mode 100644 src/assets/svg/deviceStatus/outline.svg create mode 100644 src/views/dashboard/components/BarChart.vue create mode 100644 src/views/dashboard/components/DeviceStatus.vue create mode 100644 src/views/dashboard/components/PieChart.vue create mode 100644 src/views/dashboard/components/PieChartSmall.vue diff --git a/package.json b/package.json index d5c5350..53d1585 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "echarts": "^5.6.0", "postcss-scss": "^4.0.9", "sass": "^1.85.1", + "swiper": "^11.2.5", "unplugin-auto-import": "^19.1.1", "vue": "^3.5.13" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9913d79..d594658 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ importers: sass: specifier: ^1.85.1 version: 1.85.1 + swiper: + specifier: ^11.2.5 + version: 11.2.5 unplugin-auto-import: specifier: ^19.1.1 version: 19.1.1(@vueuse/core@9.13.0(vue@3.5.13(typescript@5.7.3))) @@ -1583,6 +1586,10 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} + swiper@11.2.5: + resolution: {integrity: sha512-nG0kbIyBfeE2BPFt9nPUX03qUBF75o6+enzjIT/DfCmbh8ORlwhc4eZz1+4H/yseAgb3H+OoEYzmb64i0tYNnQ==} + engines: {node: '>= 4.7.0'} + tailwindcss@3.4.17: resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==} engines: {node: '>=14.0.0'} @@ -3152,6 +3159,8 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} + swiper@11.2.5: {} + tailwindcss@3.4.17: dependencies: '@alloc/quick-lru': 5.2.0 diff --git a/src/assets/svg/deviceStatus/error.svg b/src/assets/svg/deviceStatus/error.svg new file mode 100644 index 0000000..057adc9 --- /dev/null +++ b/src/assets/svg/deviceStatus/error.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svg/deviceStatus/online.svg b/src/assets/svg/deviceStatus/online.svg new file mode 100644 index 0000000..b8d0a7c --- /dev/null +++ b/src/assets/svg/deviceStatus/online.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/deviceStatus/outline.svg b/src/assets/svg/deviceStatus/outline.svg new file mode 100644 index 0000000..b772025 --- /dev/null +++ b/src/assets/svg/deviceStatus/outline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue index 2f8f4bf..b71586f 100644 --- a/src/views/dashboard/AppearanceMonitor.vue +++ b/src/views/dashboard/AppearanceMonitor.vue @@ -1,69 +1,143 @@ \ No newline at end of file + diff --git a/src/views/dashboard/DataOverview.scss b/src/views/dashboard/DataOverview.scss index 9a67286..84853d0 100644 --- a/src/views/dashboard/DataOverview.scss +++ b/src/views/dashboard/DataOverview.scss @@ -21,6 +21,7 @@ margin-bottom: 15px; } .chart-container { + width: 100%; height: 300px; } } @@ -29,6 +30,7 @@ .total-device { display: flex; align-items: center; + justify-content: center; margin-bottom: 15px; .device-icon { diff --git a/src/views/dashboard/DataOverview.vue b/src/views/dashboard/DataOverview.vue index ea698f9..d4ab72c 100644 --- a/src/views/dashboard/DataOverview.vue +++ b/src/views/dashboard/DataOverview.vue @@ -1,195 +1,167 @@ \ No newline at end of file +@import url("./DataOverview.scss"); + diff --git a/src/views/dashboard/components/BarChart.vue b/src/views/dashboard/components/BarChart.vue new file mode 100644 index 0000000..7bf3b42 --- /dev/null +++ b/src/views/dashboard/components/BarChart.vue @@ -0,0 +1,320 @@ + + diff --git a/src/views/dashboard/components/DeviceStatus.vue b/src/views/dashboard/components/DeviceStatus.vue new file mode 100644 index 0000000..dc865a9 --- /dev/null +++ b/src/views/dashboard/components/DeviceStatus.vue @@ -0,0 +1,103 @@ + + + + diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue new file mode 100644 index 0000000..4dc46ed --- /dev/null +++ b/src/views/dashboard/components/PieChart.vue @@ -0,0 +1,92 @@ + + diff --git a/src/views/dashboard/components/PieChartSmall.vue b/src/views/dashboard/components/PieChartSmall.vue new file mode 100644 index 0000000..0956441 --- /dev/null +++ b/src/views/dashboard/components/PieChartSmall.vue @@ -0,0 +1,92 @@ + +