From 604a42f7651e9d064e9c227615041bec8369077d Mon Sep 17 00:00:00 2001 From: JINGYJ <1458671527@qq.com> Date: Wed, 12 Mar 2025 14:06:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 214 ++++++++++++++++++ package.json | 1 + src/views/dashboard/AppearanceMonitor.vue | 5 +- src/views/dashboard/DataOverview.scss | 7 +- src/views/dashboard/DataOverview.vue | 14 +- src/views/dashboard/components/PieChart.vue | 4 +- .../dashboard/components/PieChartSmall.vue | 4 +- 7 files changed, 234 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e12ab2..ad5064d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "sass": "^1.85.1", "swiper": "^11.2.5", "unplugin-auto-import": "^19.1.1", + "video.js": "^8.22.0", "vue": "^3.5.13" }, "devDependencies": { @@ -390,6 +391,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/runtime": { + "version": "7.26.10", + "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.26.10.tgz", + "integrity": "sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/template": { "version": "7.26.9", "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.26.9.tgz", @@ -1818,6 +1830,51 @@ "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==", "devOptional": true }, + "node_modules/@videojs/http-streaming": { + "version": "3.17.0", + "resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-3.17.0.tgz", + "integrity": "sha512-Ch1P3tvvIEezeZXyK11UfWgp4cWKX4vIhZ30baN/lRinqdbakZ5hiAI3pGjRy3d+q/Epyc8Csz5xMdKNNGYpcw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^4.1.1", + "aes-decrypter": "^4.0.2", + "global": "^4.4.0", + "m3u8-parser": "^7.2.0", + "mpd-parser": "^1.3.1", + "mux.js": "7.1.0", + "video.js": "^7 || ^8" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "video.js": "^8.19.0" + } + }, + "node_modules/@videojs/vhs-utils": { + "version": "4.1.1", + "resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz", + "integrity": "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "global": "^4.4.0" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, + "node_modules/@videojs/xhr": { + "version": "2.7.0", + "resolved": "https://registry.npmmirror.com/@videojs/xhr/-/xhr-2.7.0.tgz", + "integrity": "sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "global": "~4.4.0", + "is-function": "^1.0.1" + } + }, "node_modules/@vitejs/plugin-vue": { "version": "5.2.1", "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz", @@ -2189,6 +2246,14 @@ } } }, + "node_modules/@xmldom/xmldom": { + "version": "0.8.10", + "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz", + "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/acorn": { "version": "8.14.1", "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.14.1.tgz", @@ -2200,6 +2265,17 @@ "node": ">=0.4.0" } }, + "node_modules/aes-decrypter": { + "version": "4.0.2", + "resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-4.0.2.tgz", + "integrity": "sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^4.1.1", + "global": "^4.4.0", + "pkcs7": "^1.0.4" + } + }, "node_modules/alien-signals": { "version": "1.0.4", "resolved": "https://registry.npmmirror.com/alien-signals/-/alien-signals-1.0.4.tgz", @@ -2631,6 +2707,11 @@ "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", "dev": true }, + "node_modules/dom-walk": { + "version": "0.1.2", + "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz", + "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==" + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -2962,6 +3043,15 @@ "node": ">= 6" } }, + "node_modules/global": { + "version": "4.4.0", + "resolved": "https://registry.npmmirror.com/global/-/global-4.4.0.tgz", + "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==", + "dependencies": { + "min-document": "^2.19.0", + "process": "^0.11.10" + } + }, "node_modules/globals": { "version": "11.12.0", "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz", @@ -3054,6 +3144,11 @@ "node": ">=8" } }, + "node_modules/is-function": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz", + "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==" + }, "node_modules/is-glob": { "version": "4.0.3", "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz", @@ -3455,6 +3550,16 @@ "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", "dev": true }, + "node_modules/m3u8-parser": { + "version": "7.2.0", + "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-7.2.0.tgz", + "integrity": "sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^4.1.1", + "global": "^4.4.0" + } + }, "node_modules/magic-string": { "version": "0.30.17", "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.17.tgz", @@ -3491,6 +3596,14 @@ "node": ">=8.6" } }, + "node_modules/min-document": { + "version": "2.19.0", + "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz", + "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==", + "dependencies": { + "dom-walk": "^0.1.0" + } + }, "node_modules/mini-svg-data-uri": { "version": "1.4.4", "resolved": "https://registry.npmmirror.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz", @@ -3568,6 +3681,20 @@ "random": "bin/random" } }, + "node_modules/mpd-parser": { + "version": "1.3.1", + "resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-1.3.1.tgz", + "integrity": "sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/vhs-utils": "^4.0.0", + "@xmldom/xmldom": "^0.8.3", + "global": "^4.4.0" + }, + "bin": { + "mpd-to-m3u8-json": "bin/parse.js" + } + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz", @@ -3580,6 +3707,22 @@ "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==", "dev": true }, + "node_modules/mux.js": { + "version": "7.1.0", + "resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-7.1.0.tgz", + "integrity": "sha512-NTxawK/BBELJrYsZThEulyUMDVlLizKdxyAsMuzoCD1eFj97BVaA8D/CvKsKu6FOLYkFojN5CbM9h++ZTZtknA==", + "dependencies": { + "@babel/runtime": "^7.11.2", + "global": "^4.4.0" + }, + "bin": { + "muxjs-transmux": "bin/transmux.js" + }, + "engines": { + "node": ">=8", + "npm": ">=5" + } + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz", @@ -3799,6 +3942,17 @@ "node": ">= 6" } }, + "node_modules/pkcs7": { + "version": "1.0.4", + "resolved": "https://registry.npmmirror.com/pkcs7/-/pkcs7-1.0.4.tgz", + "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==", + "dependencies": { + "@babel/runtime": "^7.5.5" + }, + "bin": { + "pkcs7": "bin/cli.js" + } + }, "node_modules/pkg-types": { "version": "2.1.0", "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-2.1.0.tgz", @@ -3976,6 +4130,14 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "node_modules/process": { + "version": "0.11.10", + "resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz", + "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/quansync": { "version": "0.2.8", "resolved": "https://registry.npmmirror.com/quansync/-/quansync-0.2.8.tgz", @@ -4032,6 +4194,11 @@ "node": ">=8.10.0" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/resolve": { "version": "1.22.10", "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.10.tgz", @@ -4778,6 +4945,53 @@ "node": ">= 0.4.0" } }, + "node_modules/video.js": { + "version": "8.22.0", + "resolved": "https://registry.npmmirror.com/video.js/-/video.js-8.22.0.tgz", + "integrity": "sha512-xge2kpjsvC0zgFJ1cqt+wTqsi21+huFswlonPFh7qiplypsb4FN/D2Rz6bWdG/S9eQaPHfWHsarmJL/7D3DHoA==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@videojs/http-streaming": "^3.17.0", + "@videojs/vhs-utils": "^4.1.1", + "@videojs/xhr": "2.7.0", + "aes-decrypter": "^4.0.2", + "global": "4.4.0", + "m3u8-parser": "^7.2.0", + "mpd-parser": "^1.3.1", + "mux.js": "^7.0.1", + "videojs-contrib-quality-levels": "4.1.0", + "videojs-font": "4.2.0", + "videojs-vtt.js": "0.15.5" + } + }, + "node_modules/videojs-contrib-quality-levels": { + "version": "4.1.0", + "resolved": "https://registry.npmmirror.com/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz", + "integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==", + "dependencies": { + "global": "^4.4.0" + }, + "engines": { + "node": ">=16", + "npm": ">=8" + }, + "peerDependencies": { + "video.js": "^8" + } + }, + "node_modules/videojs-font": { + "version": "4.2.0", + "resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-4.2.0.tgz", + "integrity": "sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==" + }, + "node_modules/videojs-vtt.js": { + "version": "0.15.5", + "resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz", + "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==", + "dependencies": { + "global": "^4.3.1" + } + }, "node_modules/vite": { "version": "6.2.0", "resolved": "https://registry.npmmirror.com/vite/-/vite-6.2.0.tgz", diff --git a/package.json b/package.json index 8820495..63ba3f1 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "sass": "^1.85.1", "swiper": "^11.2.5", "unplugin-auto-import": "^19.1.1", + "video.js": "^8.22.0", "vue": "^3.5.13" }, "devDependencies": { diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue index f06e559..a70cd7d 100644 --- a/src/views/dashboard/AppearanceMonitor.vue +++ b/src/views/dashboard/AppearanceMonitor.vue @@ -2,7 +2,8 @@
- 监控画面 + +
{ console.log(index); activeIndex.value = index; + imageBig.value = images.value[index]; }; const swiperRef = ref(null); console.log(swiperRef.value); diff --git a/src/views/dashboard/DataOverview.scss b/src/views/dashboard/DataOverview.scss index 84853d0..614222e 100644 --- a/src/views/dashboard/DataOverview.scss +++ b/src/views/dashboard/DataOverview.scss @@ -21,6 +21,7 @@ margin-bottom: 15px; } .chart-container { + margin-top: 40px; width: 100%; height: 300px; } @@ -70,9 +71,9 @@ .monitor-images { display: flex; - gap: 10px; - margin-top: 15px; - + box-sizing: border-box; + gap: 16px; + padding: 20px 16px 20px 16px; img { width: 100%; height: auto; diff --git a/src/views/dashboard/DataOverview.vue b/src/views/dashboard/DataOverview.vue index d4ab72c..0dbd312 100644 --- a/src/views/dashboard/DataOverview.vue +++ b/src/views/dashboard/DataOverview.vue @@ -85,12 +85,12 @@ { value: 5, name: '小窗裂纹' }, ]" :colors="[ - '#4CAF50', - '#8BC34A', - '#CDDC39', - '#FFEB3B', - '#FFC107', - '#FF5722', + '#FF7C09', + '#0032FF', + '#04FFF2', + '#D19EFF', + '#FF0103', + '#9EFFF3', ]" />
@@ -110,7 +110,7 @@ { value: 65, name: '撑杆断裂' }, { value: 35, name: '撑杆弯曲' }, ]" - :colors="['#2196F3', '#9C27B0']" + :colors="['#9DFFF3', '#FFA179']" />
diff --git a/src/views/dashboard/components/PieChart.vue b/src/views/dashboard/components/PieChart.vue index 4dc46ed..4161626 100644 --- a/src/views/dashboard/components/PieChart.vue +++ b/src/views/dashboard/components/PieChart.vue @@ -12,7 +12,7 @@ const props = defineProps({ const chartContainer = ref(null); let chartInstance: echarts.ECharts | null = null; - +const colorsArr = ['#FFCC4A','#028FF5','#06EA7C','#8500FF','#FF7D05','#00D1FF'] // 初始化图表 const initChart = () => { if (!chartContainer.value) return; @@ -48,7 +48,7 @@ const updateChart = () => { color: (params) => new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: props.colors[params.dataIndex] }, - { offset: 1, color: "#FFFFFF" }, + { offset: 1, color: colorsArr[params.dataIndex] }, ]), }, data: props.data, diff --git a/src/views/dashboard/components/PieChartSmall.vue b/src/views/dashboard/components/PieChartSmall.vue index 0956441..567bcc3 100644 --- a/src/views/dashboard/components/PieChartSmall.vue +++ b/src/views/dashboard/components/PieChartSmall.vue @@ -12,7 +12,7 @@ const props = defineProps({ const chartContainer = ref(null); let chartInstance: echarts.ECharts | null = null; - +const colorsArr = ['#3FE3FA','#FF4D00'] // 初始化图表 const initChart = () => { if (!chartContainer.value) return; @@ -48,7 +48,7 @@ const updateChart = () => { color: (params) => new echarts.graphic.LinearGradient(0, 0, 1, 0, [ { offset: 0, color: props.colors[params.dataIndex] }, - { offset: 1, color: "#FFFFFF" }, + { offset: 1, color: colorsArr[params.dataIndex] }, ]), }, data: props.data,