简柏林 / thingskit-front · Commits

Commit df8309ffe0a988d4a84a4c117511af00e67d4f42

Authored by fengtao
1 parent 732fcbab

feat:新增视频管理，目前兼容m3u8和mp4

Inline Side-by-side
Showing 8 changed files with 421 additions and 410 deletions
... ... @@ -13,10 +13,10 @@ VITE_PUBLIC_PATH = /
13 13 # 线上演示环境
14 14 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
15 15 # 线上测试环境
16   -VITE_PROXY = [["/api","http://47.99.141.212:8080/api"]]
  16 +VITE_PROXY = [["/api","https://dev.thingskit.com/api"]]
17 17
18 18 # 实时数据的ws地址
19   -VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
  19 +VITE_WEB_SOCKET = wss://dev.thingskit.com/api/ws/plugins/telemetry?token=
20 20
21 21 # Delete console
22 22 VITE_DROP_CONSOLE = true
... ...
... ... @@ -34,11 +34,12 @@
34 34 "sortablejs": "^1.14.0",
35 35 "tinymce": "^5.8.2",
36 36 "vditor": "^3.8.6",
37   - "vue": "3.2.2",
  37 + "vue": "^3.2.31",
38 38 "vue-i18n": "9.1.7",
39 39 "vue-json-pretty": "^2.0.4",
40 40 "vue-router": "^4.0.11",
41 41 "vue-types": "^4.0.3",
  42 + "vue3-video-play": "^1.3.1-beta.6",
42 43 "xlsx": "^0.17.0"
43 44 },
44 45 "devDependencies": {
... ... @@ -64,7 +65,7 @@
64 65 "@vitejs/plugin-legacy": "^1.5.1",
65 66 "@vitejs/plugin-vue": "^1.4.0",
66 67 "@vitejs/plugin-vue-jsx": "^1.1.7",
67   - "@vue/compiler-sfc": "3.2.2",
  68 + "@vue/compiler-sfc": "^3.2.31",
68 69 "@vue/test-utils": "^2.0.0-rc.12",
69 70 "autoprefixer": "^10.3.1",
70 71 "commitizen": "^4.2.4",
... ... @@ -501,6 +502,7 @@
501 502 },
502 503 "node_modules/@babel/helper-validator-identifier": {
503 504 "version": "7.16.7",
  505 + "dev": true,
504 506 "license": "MIT",
505 507 "engines": {
506 508 "node": ">=6.9.0"
... ... @@ -1741,6 +1743,7 @@
1741 1743 },
1742 1744 "node_modules/@babel/types": {
1743 1745 "version": "7.16.8",
  1746 + "dev": true,
1744 1747 "license": "MIT",
1745 1748 "dependencies": {
1746 1749 "@babel/helper-validator-identifier": "^7.16.7",
... ... @@ -3671,68 +3674,49 @@
3671 3674 }
3672 3675 },
3673 3676 "node_modules/@vue/compiler-core": {
3674   - "version": "3.2.2",
3675   - "license": "MIT",
  3677 + "version": "3.2.33",
  3678 + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
  3679 + "integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
3676 3680 "dependencies": {
3677   - "@babel/parser": "^7.12.0",
3678   - "@babel/types": "^7.12.0",
3679   - "@vue/shared": "3.2.2",
3680   - "estree-walker": "^2.0.1",
  3681 + "@babel/parser": "^7.16.4",
  3682 + "@vue/shared": "3.2.33",
  3683 + "estree-walker": "^2.0.2",
3681 3684 "source-map": "^0.6.1"
3682 3685 }
3683 3686 },
3684 3687 "node_modules/@vue/compiler-dom": {
3685   - "version": "3.2.2",
3686   - "license": "MIT",
  3688 + "version": "3.2.33",
  3689 + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
  3690 + "integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
3687 3691 "dependencies": {
3688   - "@vue/compiler-core": "3.2.2",
3689   - "@vue/shared": "3.2.2"
  3692 + "@vue/compiler-core": "3.2.33",
  3693 + "@vue/shared": "3.2.33"
3690 3694 }
3691 3695 },
3692 3696 "node_modules/@vue/compiler-sfc": {
3693   - "version": "3.2.2",
3694   - "license": "MIT",
  3697 + "version": "3.2.33",
  3698 + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
  3699 + "integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
3695 3700 "dependencies": {
3696   - "@babel/parser": "^7.13.9",
3697   - "@babel/types": "^7.13.0",
3698   - "@types/estree": "^0.0.48",
3699   - "@vue/compiler-core": "3.2.2",
3700   - "@vue/compiler-dom": "3.2.2",
3701   - "@vue/compiler-ssr": "3.2.2",
3702   - "@vue/shared": "3.2.2",
3703   - "consolidate": "^0.16.0",
3704   - "estree-walker": "^2.0.1",
3705   - "hash-sum": "^2.0.0",
3706   - "lru-cache": "^5.1.1",
  3701 + "@babel/parser": "^7.16.4",
  3702 + "@vue/compiler-core": "3.2.33",
  3703 + "@vue/compiler-dom": "3.2.33",
  3704 + "@vue/compiler-ssr": "3.2.33",
  3705 + "@vue/reactivity-transform": "3.2.33",
  3706 + "@vue/shared": "3.2.33",
  3707 + "estree-walker": "^2.0.2",
3707 3708 "magic-string": "^0.25.7",
3708   - "merge-source-map": "^1.1.0",
3709 3709 "postcss": "^8.1.10",
3710   - "postcss-modules": "^4.0.0",
3711   - "postcss-selector-parser": "^6.0.4",
3712 3710 "source-map": "^0.6.1"
3713 3711 }
3714 3712 },
3715   - "node_modules/@vue/compiler-sfc/node_modules/@types/estree": {
3716   - "version": "0.0.48",
3717   - "license": "MIT"
3718   - },
3719   - "node_modules/@vue/compiler-sfc/node_modules/lru-cache": {
3720   - "version": "5.1.1",
3721   - "license": "ISC",
3722   - "dependencies": {
3723   - "yallist": "^3.0.2"
3724   - }
3725   - },
3726   - "node_modules/@vue/compiler-sfc/node_modules/yallist": {
3727   - "version": "3.1.1",
3728   - "license": "ISC"
3729   - },
3730 3713 "node_modules/@vue/compiler-ssr": {
3731   - "version": "3.2.2",
3732   - "license": "MIT",
  3714 + "version": "3.2.33",
  3715 + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
  3716 + "integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
3733 3717 "dependencies": {
3734   - "@vue/compiler-dom": "3.2.2",
3735   - "@vue/shared": "3.2.2"
  3718 + "@vue/compiler-dom": "3.2.33",
  3719 + "@vue/shared": "3.2.33"
3736 3720 }
3737 3721 },
3738 3722 "node_modules/@vue/devtools-api": {
... ... @@ -3740,45 +3724,60 @@
3740 3724 "license": "MIT"
3741 3725 },
3742 3726 "node_modules/@vue/reactivity": {
3743   - "version": "3.2.26",
3744   - "dev": true,
3745   - "license": "MIT",
  3727 + "version": "3.2.33",
  3728 + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
  3729 + "integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
3746 3730 "dependencies": {
3747   - "@vue/shared": "3.2.26"
  3731 + "@vue/shared": "3.2.33"
3748 3732 }
3749 3733 },
3750   - "node_modules/@vue/reactivity/node_modules/@vue/shared": {
3751   - "version": "3.2.26",
3752   - "dev": true,
3753   - "license": "MIT"
3754   - },
3755   - "node_modules/@vue/runtime-core": {
3756   - "version": "3.2.2",
3757   - "license": "MIT",
  3734 + "node_modules/@vue/reactivity-transform": {
  3735 + "version": "3.2.33",
  3736 + "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
  3737 + "integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
3758 3738 "dependencies": {
3759   - "@vue/reactivity": "3.2.2",
3760   - "@vue/shared": "3.2.2"
  3739 + "@babel/parser": "^7.16.4",
  3740 + "@vue/compiler-core": "3.2.33",
  3741 + "@vue/shared": "3.2.33",
  3742 + "estree-walker": "^2.0.2",
  3743 + "magic-string": "^0.25.7"
3761 3744 }
3762 3745 },
3763   - "node_modules/@vue/runtime-core/node_modules/@vue/reactivity": {
3764   - "version": "3.2.2",
3765   - "license": "MIT",
  3746 + "node_modules/@vue/runtime-core": {
  3747 + "version": "3.2.33",
  3748 + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
  3749 + "integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
3766 3750 "dependencies": {
3767   - "@vue/shared": "3.2.2"
  3751 + "@vue/reactivity": "3.2.33",
  3752 + "@vue/shared": "3.2.33"
3768 3753 }
3769 3754 },
3770 3755 "node_modules/@vue/runtime-dom": {
3771   - "version": "3.2.2",
3772   - "license": "MIT",
  3756 + "version": "3.2.33",
  3757 + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
  3758 + "integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
3773 3759 "dependencies": {
3774   - "@vue/runtime-core": "3.2.2",
3775   - "@vue/shared": "3.2.2",
  3760 + "@vue/runtime-core": "3.2.33",
  3761 + "@vue/shared": "3.2.33",
3776 3762 "csstype": "^2.6.8"
3777 3763 }
3778 3764 },
  3765 + "node_modules/@vue/server-renderer": {
  3766 + "version": "3.2.33",
  3767 + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
  3768 + "integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
  3769 + "dependencies": {
  3770 + "@vue/compiler-ssr": "3.2.33",
  3771 + "@vue/shared": "3.2.33"
  3772 + },
  3773 + "peerDependencies": {
  3774 + "vue": "3.2.33"
  3775 + }
  3776 + },
3779 3777 "node_modules/@vue/shared": {
3780   - "version": "3.2.2",
3781   - "license": "MIT"
  3778 + "version": "3.2.33",
  3779 + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
  3780 + "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
3782 3781 },
3783 3782 "node_modules/@vue/test-utils": {
3784 3783 "version": "2.0.0-rc.18",
... ... @@ -4898,6 +4897,7 @@
4898 4897 },
4899 4898 "node_modules/bluebird": {
4900 4899 "version": "3.7.2",
  4900 + "dev": true,
4901 4901 "license": "MIT"
4902 4902 },
4903 4903 "node_modules/boolbase": {
... ... @@ -5928,16 +5928,6 @@
5928 5928 "version": "0.1.1",
5929 5929 "dev": true
5930 5930 },
5931   - "node_modules/consolidate": {
5932   - "version": "0.16.0",
5933   - "license": "MIT",
5934   - "dependencies": {
5935   - "bluebird": "^3.7.2"
5936   - },
5937   - "engines": {
5938   - "node": ">= 0.10.0"
5939   - }
5940   - },
5941 5931 "node_modules/constant-case": {
5942 5932 "version": "3.0.4",
5943 5933 "dev": true,
... ... @@ -6565,6 +6555,7 @@
6565 6555 },
6566 6556 "node_modules/cssesc": {
6567 6557 "version": "3.0.0",
  6558 + "dev": true,
6568 6559 "license": "MIT",
6569 6560 "bin": {
6570 6561 "cssesc": "bin/cssesc"
... ... @@ -6606,8 +6597,9 @@
6606 6597 "license": "MIT"
6607 6598 },
6608 6599 "node_modules/csstype": {
6609   - "version": "2.6.19",
6610   - "license": "MIT"
  6600 + "version": "2.6.20",
  6601 + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
  6602 + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
6611 6603 },
6612 6604 "node_modules/currently-unhandled": {
6613 6605 "version": "0.4.1",
... ... @@ -8807,20 +8799,6 @@
8807 8799 "dev": true,
8808 8800 "license": "MIT"
8809 8801 },
8810   - "node_modules/generic-names": {
8811   - "version": "4.0.0",
8812   - "license": "MIT",
8813   - "dependencies": {
8814   - "loader-utils": "^3.2.0"
8815   - }
8816   - },
8817   - "node_modules/generic-names/node_modules/loader-utils": {
8818   - "version": "3.2.0",
8819   - "license": "MIT",
8820   - "engines": {
8821   - "node": ">= 12.13.0"
8822   - }
8823   - },
8824 8802 "node_modules/gensync": {
8825 8803 "version": "1.0.0-beta.2",
8826 8804 "dev": true,
... ... @@ -9315,6 +9293,7 @@
9315 9293 },
9316 9294 "node_modules/hash-sum": {
9317 9295 "version": "2.0.0",
  9296 + "dev": true,
9318 9297 "license": "MIT"
9319 9298 },
9320 9299 "node_modules/he": {
... ... @@ -9334,6 +9313,11 @@
9334 9313 "tslib": "^2.0.3"
9335 9314 }
9336 9315 },
  9316 + "node_modules/hls.js": {
  9317 + "version": "1.1.5",
  9318 + "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.1.5.tgz",
  9319 + "integrity": "sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA=="
  9320 + },
9337 9321 "node_modules/homedir-polyfill": {
9338 9322 "version": "1.0.3",
9339 9323 "dev": true,
... ... @@ -9580,20 +9564,6 @@
9580 9564 "node": ">=0.10.0"
9581 9565 }
9582 9566 },
9583   - "node_modules/icss-replace-symbols": {
9584   - "version": "1.1.0",
9585   - "license": "ISC"
9586   - },
9587   - "node_modules/icss-utils": {
9588   - "version": "5.1.0",
9589   - "license": "ISC",
9590   - "engines": {
9591   - "node": "^10 || ^12 || >= 14"
9592   - },
9593   - "peerDependencies": {
9594   - "postcss": "^8.1.0"
9595   - }
9596   - },
9597 9567 "node_modules/idb": {
9598 9568 "version": "6.1.5",
9599 9569 "dev": true,
... ... @@ -12147,10 +12117,6 @@
12147 12117 "version": "4.17.21",
12148 12118 "license": "MIT"
12149 12119 },
12150   - "node_modules/lodash.camelcase": {
12151   - "version": "4.3.0",
12152   - "license": "MIT"
12153   - },
12154 12120 "node_modules/lodash.debounce": {
12155 12121 "version": "4.0.8",
12156 12122 "dev": true,
... ... @@ -12707,13 +12673,6 @@
12707 12673 "node": ">=4"
12708 12674 }
12709 12675 },
12710   - "node_modules/merge-source-map": {
12711   - "version": "1.1.0",
12712   - "license": "MIT",
12713   - "dependencies": {
12714   - "source-map": "^0.6.1"
12715   - }
12716   - },
12717 12676 "node_modules/merge-stream": {
12718 12677 "version": "2.0.0",
12719 12678 "dev": true,
... ... @@ -14178,74 +14137,6 @@
14178 14137 "dev": true,
14179 14138 "license": "MIT"
14180 14139 },
14181   - "node_modules/postcss-modules": {
14182   - "version": "4.3.0",
14183   - "license": "MIT",
14184   - "dependencies": {
14185   - "generic-names": "^4.0.0",
14186   - "icss-replace-symbols": "^1.1.0",
14187   - "lodash.camelcase": "^4.3.0",
14188   - "postcss-modules-extract-imports": "^3.0.0",
14189   - "postcss-modules-local-by-default": "^4.0.0",
14190   - "postcss-modules-scope": "^3.0.0",
14191   - "postcss-modules-values": "^4.0.0",
14192   - "string-hash": "^1.1.1"
14193   - },
14194   - "peerDependencies": {
14195   - "postcss": "^8.0.0"
14196   - }
14197   - },
14198   - "node_modules/postcss-modules-extract-imports": {
14199   - "version": "3.0.0",
14200   - "license": "ISC",
14201   - "engines": {
14202   - "node": "^10 || ^12 || >= 14"
14203   - },
14204   - "peerDependencies": {
14205   - "postcss": "^8.1.0"
14206   - }
14207   - },
14208   - "node_modules/postcss-modules-local-by-default": {
14209   - "version": "4.0.0",
14210   - "license": "MIT",
14211   - "dependencies": {
14212   - "icss-utils": "^5.0.0",
14213   - "postcss-selector-parser": "^6.0.2",
14214   - "postcss-value-parser": "^4.1.0"
14215   - },
14216   - "engines": {
14217   - "node": "^10 || ^12 || >= 14"
14218   - },
14219   - "peerDependencies": {
14220   - "postcss": "^8.1.0"
14221   - }
14222   - },
14223   - "node_modules/postcss-modules-scope": {
14224   - "version": "3.0.0",
14225   - "license": "ISC",
14226   - "dependencies": {
14227   - "postcss-selector-parser": "^6.0.4"
14228   - },
14229   - "engines": {
14230   - "node": "^10 || ^12 || >= 14"
14231   - },
14232   - "peerDependencies": {
14233   - "postcss": "^8.1.0"
14234   - }
14235   - },
14236   - "node_modules/postcss-modules-values": {
14237   - "version": "4.0.0",
14238   - "license": "ISC",
14239   - "dependencies": {
14240   - "icss-utils": "^5.0.0"
14241   - },
14242   - "engines": {
14243   - "node": "^10 || ^12 || >= 14"
14244   - },
14245   - "peerDependencies": {
14246   - "postcss": "^8.1.0"
14247   - }
14248   - },
14249 14140 "node_modules/postcss-resolve-nested-selector": {
14250 14141 "version": "0.1.1",
14251 14142 "dev": true,
... ... @@ -14347,6 +14238,7 @@
14347 14238 },
14348 14239 "node_modules/postcss-selector-parser": {
14349 14240 "version": "6.0.8",
  14241 + "dev": true,
14350 14242 "license": "MIT",
14351 14243 "dependencies": {
14352 14244 "cssesc": "^3.0.0",
... ... @@ -14391,6 +14283,7 @@
14391 14283 },
14392 14284 "node_modules/postcss-value-parser": {
14393 14285 "version": "4.2.0",
  14286 + "dev": true,
14394 14287 "license": "MIT"
14395 14288 },
14396 14289 "node_modules/posthtml": {
... ... @@ -16263,10 +16156,6 @@
16263 16156 "node": ">=0.6.19"
16264 16157 }
16265 16158 },
16266   - "node_modules/string-hash": {
16267   - "version": "1.1.3",
16268   - "license": "CC0-1.0"
16269   - },
16270 16159 "node_modules/string-length": {
16271 16160 "version": "4.0.2",
16272 16161 "dev": true,
... ... @@ -17280,6 +17169,14 @@
17280 17169 "dev": true,
17281 17170 "license": "MIT"
17282 17171 },
  17172 + "node_modules/throttle-debounce": {
  17173 + "version": "3.0.1",
  17174 + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
  17175 + "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
  17176 + "engines": {
  17177 + "node": ">=10"
  17178 + }
  17179 + },
17283 17180 "node_modules/through": {
17284 17181 "version": "2.3.8",
17285 17182 "dev": true,
... ... @@ -17357,6 +17254,7 @@
17357 17254 },
17358 17255 "node_modules/to-fast-properties": {
17359 17256 "version": "2.0.0",
  17257 + "dev": true,
17360 17258 "license": "MIT",
17361 17259 "engines": {
17362 17260 "node": ">=4"
... ... @@ -18030,6 +17928,7 @@
18030 17928 },
18031 17929 "node_modules/util-deprecate": {
18032 17930 "version": "1.0.2",
  17931 + "dev": true,
18033 17932 "license": "MIT"
18034 17933 },
18035 17934 "node_modules/utils-merge": {
... ... @@ -18655,38 +18554,16 @@
18655 18554 "vscode-typescript-languageservice": "^0.27.25"
18656 18555 }
18657 18556 },
18658   - "node_modules/vscode-vue-languageservice/node_modules/@vue/compiler-core": {
18659   - "version": "3.2.26",
18660   - "dev": true,
18661   - "license": "MIT",
18662   - "dependencies": {
18663   - "@babel/parser": "^7.16.4",
18664   - "@vue/shared": "3.2.26",
18665   - "estree-walker": "^2.0.2",
18666   - "source-map": "^0.6.1"
18667   - }
18668   - },
18669   - "node_modules/vscode-vue-languageservice/node_modules/@vue/compiler-dom": {
18670   - "version": "3.2.26",
18671   - "dev": true,
18672   - "license": "MIT",
18673   - "dependencies": {
18674   - "@vue/compiler-core": "3.2.26",
18675   - "@vue/shared": "3.2.26"
18676   - }
18677   - },
18678   - "node_modules/vscode-vue-languageservice/node_modules/@vue/shared": {
18679   - "version": "3.2.26",
18680   - "dev": true,
18681   - "license": "MIT"
18682   - },
18683 18557 "node_modules/vue": {
18684   - "version": "3.2.2",
18685   - "license": "MIT",
  18558 + "version": "3.2.33",
  18559 + "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz",
  18560 + "integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
18686 18561 "dependencies": {
18687   - "@vue/compiler-dom": "3.2.2",
18688   - "@vue/runtime-dom": "3.2.2",
18689   - "@vue/shared": "3.2.2"
  18562 + "@vue/compiler-dom": "3.2.33",
  18563 + "@vue/compiler-sfc": "3.2.33",
  18564 + "@vue/runtime-dom": "3.2.33",
  18565 + "@vue/server-renderer": "3.2.33",
  18566 + "@vue/shared": "3.2.33"
18690 18567 }
18691 18568 },
18692 18569 "node_modules/vue-demi": {
... ... @@ -18820,6 +18697,16 @@
18820 18697 "node": ">=0.10.0"
18821 18698 }
18822 18699 },
  18700 + "node_modules/vue3-video-play": {
  18701 + "version": "1.3.1-beta.6",
  18702 + "resolved": "https://registry.npmjs.org/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz",
  18703 + "integrity": "sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw==",
  18704 + "dependencies": {
  18705 + "hls.js": "^1.0.10",
  18706 + "throttle-debounce": "^3.0.1",
  18707 + "vue": "^3.2.2"
  18708 + }
  18709 + },
18823 18710 "node_modules/w3c-hr-time": {
18824 18711 "version": "1.0.2",
18825 18712 "dev": true,
... ... @@ -19703,7 +19590,8 @@
19703 19590 }
19704 19591 },
19705 19592 "@babel/helper-validator-identifier": {
19706   - "version": "7.16.7"
  19593 + "version": "7.16.7",
  19594 + "dev": true
19707 19595 },
19708 19596 "@babel/helper-validator-option": {
19709 19597 "version": "7.16.7",
... ... @@ -20437,6 +20325,7 @@
20437 20325 },
20438 20326 "@babel/types": {
20439 20327 "version": "7.16.8",
  20328 + "dev": true,
20440 20329 "requires": {
20441 20330 "@babel/helper-validator-identifier": "^7.16.7",
20442 20331 "to-fast-properties": "^2.0.0"
... ... @@ -21828,106 +21717,106 @@
21828 21717 }
21829 21718 },
21830 21719 "@vue/compiler-core": {
21831   - "version": "3.2.2",
  21720 + "version": "3.2.33",
  21721 + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
  21722 + "integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
21832 21723 "requires": {
21833   - "@babel/parser": "^7.12.0",
21834   - "@babel/types": "^7.12.0",
21835   - "@vue/shared": "3.2.2",
21836   - "estree-walker": "^2.0.1",
  21724 + "@babel/parser": "^7.16.4",
  21725 + "@vue/shared": "3.2.33",
  21726 + "estree-walker": "^2.0.2",
21837 21727 "source-map": "^0.6.1"
21838 21728 }
21839 21729 },
21840 21730 "@vue/compiler-dom": {
21841   - "version": "3.2.2",
  21731 + "version": "3.2.33",
  21732 + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
  21733 + "integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
21842 21734 "requires": {
21843   - "@vue/compiler-core": "3.2.2",
21844   - "@vue/shared": "3.2.2"
  21735 + "@vue/compiler-core": "3.2.33",
  21736 + "@vue/shared": "3.2.33"
21845 21737 }
21846 21738 },
21847 21739 "@vue/compiler-sfc": {
21848   - "version": "3.2.2",
  21740 + "version": "3.2.33",
  21741 + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
  21742 + "integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
21849 21743 "requires": {
21850   - "@babel/parser": "^7.13.9",
21851   - "@babel/types": "^7.13.0",
21852   - "@types/estree": "^0.0.48",
21853   - "@vue/compiler-core": "3.2.2",
21854   - "@vue/compiler-dom": "3.2.2",
21855   - "@vue/compiler-ssr": "3.2.2",
21856   - "@vue/shared": "3.2.2",
21857   - "consolidate": "^0.16.0",
21858   - "estree-walker": "^2.0.1",
21859   - "hash-sum": "^2.0.0",
21860   - "lru-cache": "^5.1.1",
  21744 + "@babel/parser": "^7.16.4",
  21745 + "@vue/compiler-core": "3.2.33",
  21746 + "@vue/compiler-dom": "3.2.33",
  21747 + "@vue/compiler-ssr": "3.2.33",
  21748 + "@vue/reactivity-transform": "3.2.33",
  21749 + "@vue/shared": "3.2.33",
  21750 + "estree-walker": "^2.0.2",
21861 21751 "magic-string": "^0.25.7",
21862   - "merge-source-map": "^1.1.0",
21863 21752 "postcss": "^8.1.10",
21864   - "postcss-modules": "^4.0.0",
21865   - "postcss-selector-parser": "^6.0.4",
21866 21753 "source-map": "^0.6.1"
21867   - },
21868   - "dependencies": {
21869   - "@types/estree": {
21870   - "version": "0.0.48"
21871   - },
21872   - "lru-cache": {
21873   - "version": "5.1.1",
21874   - "requires": {
21875   - "yallist": "^3.0.2"
21876   - }
21877   - },
21878   - "yallist": {
21879   - "version": "3.1.1"
21880   - }
21881 21754 }
21882 21755 },
21883 21756 "@vue/compiler-ssr": {
21884   - "version": "3.2.2",
  21757 + "version": "3.2.33",
  21758 + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
  21759 + "integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
21885 21760 "requires": {
21886   - "@vue/compiler-dom": "3.2.2",
21887   - "@vue/shared": "3.2.2"
  21761 + "@vue/compiler-dom": "3.2.33",
  21762 + "@vue/shared": "3.2.33"
21888 21763 }
21889 21764 },
21890 21765 "@vue/devtools-api": {
21891 21766 "version": "6.0.0-beta.21.1"
21892 21767 },
21893 21768 "@vue/reactivity": {
21894   - "version": "3.2.26",
21895   - "dev": true,
  21769 + "version": "3.2.33",
  21770 + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
  21771 + "integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
21896 21772 "requires": {
21897   - "@vue/shared": "3.2.26"
21898   - },
21899   - "dependencies": {
21900   - "@vue/shared": {
21901   - "version": "3.2.26",
21902   - "dev": true
21903   - }
  21773 + "@vue/shared": "3.2.33"
  21774 + }
  21775 + },
  21776 + "@vue/reactivity-transform": {
  21777 + "version": "3.2.33",
  21778 + "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
  21779 + "integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
  21780 + "requires": {
  21781 + "@babel/parser": "^7.16.4",
  21782 + "@vue/compiler-core": "3.2.33",
  21783 + "@vue/shared": "3.2.33",
  21784 + "estree-walker": "^2.0.2",
  21785 + "magic-string": "^0.25.7"
21904 21786 }
21905 21787 },
21906 21788 "@vue/runtime-core": {
21907   - "version": "3.2.2",
  21789 + "version": "3.2.33",
  21790 + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
  21791 + "integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
21908 21792 "requires": {
21909   - "@vue/reactivity": "3.2.2",
21910   - "@vue/shared": "3.2.2"
21911   - },
21912   - "dependencies": {
21913   - "@vue/reactivity": {
21914   - "version": "3.2.2",
21915   - "requires": {
21916   - "@vue/shared": "3.2.2"
21917   - }
21918   - }
  21793 + "@vue/reactivity": "3.2.33",
  21794 + "@vue/shared": "3.2.33"
21919 21795 }
21920 21796 },
21921 21797 "@vue/runtime-dom": {
21922   - "version": "3.2.2",
  21798 + "version": "3.2.33",
  21799 + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
  21800 + "integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
21923 21801 "requires": {
21924   - "@vue/runtime-core": "3.2.2",
21925   - "@vue/shared": "3.2.2",
  21802 + "@vue/runtime-core": "3.2.33",
  21803 + "@vue/shared": "3.2.33",
21926 21804 "csstype": "^2.6.8"
21927 21805 }
21928 21806 },
  21807 + "@vue/server-renderer": {
  21808 + "version": "3.2.33",
  21809 + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
  21810 + "integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
  21811 + "requires": {
  21812 + "@vue/compiler-ssr": "3.2.33",
  21813 + "@vue/shared": "3.2.33"
  21814 + }
  21815 + },
21929 21816 "@vue/shared": {
21930   - "version": "3.2.2"
  21817 + "version": "3.2.33",
  21818 + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
  21819 + "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
21931 21820 },
21932 21821 "@vue/test-utils": {
21933 21822 "version": "2.0.0-rc.18",
... ... @@ -22670,7 +22559,8 @@
22670 22559 }
22671 22560 },
22672 22561 "bluebird": {
22673   - "version": "3.7.2"
  22562 + "version": "3.7.2",
  22563 + "dev": true
22674 22564 },
22675 22565 "boolbase": {
22676 22566 "version": "1.0.0",
... ... @@ -23358,12 +23248,6 @@
23358 23248 "version": "0.1.1",
23359 23249 "dev": true
23360 23250 },
23361   - "consolidate": {
23362   - "version": "0.16.0",
23363   - "requires": {
23364   - "bluebird": "^3.7.2"
23365   - }
23366   - },
23367 23251 "constant-case": {
23368 23252 "version": "3.0.4",
23369 23253 "dev": true,
... ... @@ -23779,7 +23663,8 @@
23779 23663 "dev": true
23780 23664 },
23781 23665 "cssesc": {
23782   - "version": "3.0.0"
  23666 + "version": "3.0.0",
  23667 + "dev": true
23783 23668 },
23784 23669 "csso": {
23785 23670 "version": "4.2.0",
... ... @@ -23806,7 +23691,9 @@
23806 23691 }
23807 23692 },
23808 23693 "csstype": {
23809   - "version": "2.6.19"
  23694 + "version": "2.6.20",
  23695 + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
  23696 + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
23810 23697 },
23811 23698 "currently-unhandled": {
23812 23699 "version": "0.4.1",
... ... @@ -25243,17 +25130,6 @@
25243 25130 "version": "1.0.1",
25244 25131 "dev": true
25245 25132 },
25246   - "generic-names": {
25247   - "version": "4.0.0",
25248   - "requires": {
25249   - "loader-utils": "^3.2.0"
25250   - },
25251   - "dependencies": {
25252   - "loader-utils": {
25253   - "version": "3.2.0"
25254   - }
25255   - }
25256   - },
25257 25133 "gensync": {
25258 25134 "version": "1.0.0-beta.2",
25259 25135 "dev": true
... ... @@ -25559,7 +25435,8 @@
25559 25435 }
25560 25436 },
25561 25437 "hash-sum": {
25562   - "version": "2.0.0"
  25438 + "version": "2.0.0",
  25439 + "dev": true
25563 25440 },
25564 25441 "he": {
25565 25442 "version": "1.2.0",
... ... @@ -25573,6 +25450,11 @@
25573 25450 "tslib": "^2.0.3"
25574 25451 }
25575 25452 },
  25453 + "hls.js": {
  25454 + "version": "1.1.5",
  25455 + "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.1.5.tgz",
  25456 + "integrity": "sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA=="
  25457 + },
25576 25458 "homedir-polyfill": {
25577 25459 "version": "1.0.3",
25578 25460 "dev": true,
... ... @@ -25744,13 +25626,6 @@
25744 25626 "safer-buffer": ">= 2.1.2 < 3"
25745 25627 }
25746 25628 },
25747   - "icss-replace-symbols": {
25748   - "version": "1.1.0"
25749   - },
25750   - "icss-utils": {
25751   - "version": "5.1.0",
25752   - "requires": {}
25753   - },
25754 25629 "idb": {
25755 25630 "version": "6.1.5",
25756 25631 "dev": true
... ... @@ -27449,9 +27324,6 @@
27449 27324 "lodash-es": {
27450 27325 "version": "4.17.21"
27451 27326 },
27452   - "lodash.camelcase": {
27453   - "version": "4.3.0"
27454   - },
27455 27327 "lodash.debounce": {
27456 27328 "version": "4.0.8",
27457 27329 "dev": true
... ... @@ -27818,12 +27690,6 @@
27818 27690 "is-plain-obj": "^1.1"
27819 27691 }
27820 27692 },
27821   - "merge-source-map": {
27822   - "version": "1.1.0",
27823   - "requires": {
27824   - "source-map": "^0.6.1"
27825   - }
27826   - },
27827 27693 "merge-stream": {
27828 27694 "version": "2.0.0",
27829 27695 "dev": true
... ... @@ -28738,43 +28604,6 @@
28738 28604 "version": "0.2.3",
28739 28605 "dev": true
28740 28606 },
28741   - "postcss-modules": {
28742   - "version": "4.3.0",
28743   - "requires": {
28744   - "generic-names": "^4.0.0",
28745   - "icss-replace-symbols": "^1.1.0",
28746   - "lodash.camelcase": "^4.3.0",
28747   - "postcss-modules-extract-imports": "^3.0.0",
28748   - "postcss-modules-local-by-default": "^4.0.0",
28749   - "postcss-modules-scope": "^3.0.0",
28750   - "postcss-modules-values": "^4.0.0",
28751   - "string-hash": "^1.1.1"
28752   - }
28753   - },
28754   - "postcss-modules-extract-imports": {
28755   - "version": "3.0.0",
28756   - "requires": {}
28757   - },
28758   - "postcss-modules-local-by-default": {
28759   - "version": "4.0.0",
28760   - "requires": {
28761   - "icss-utils": "^5.0.0",
28762   - "postcss-selector-parser": "^6.0.2",
28763   - "postcss-value-parser": "^4.1.0"
28764   - }
28765   - },
28766   - "postcss-modules-scope": {
28767   - "version": "3.0.0",
28768   - "requires": {
28769   - "postcss-selector-parser": "^6.0.4"
28770   - }
28771   - },
28772   - "postcss-modules-values": {
28773   - "version": "4.0.0",
28774   - "requires": {
28775   - "icss-utils": "^5.0.0"
28776   - }
28777   - },
28778 28607 "postcss-resolve-nested-selector": {
28779 28608 "version": "0.1.1",
28780 28609 "dev": true
... ... @@ -28845,6 +28674,7 @@
28845 28674 },
28846 28675 "postcss-selector-parser": {
28847 28676 "version": "6.0.8",
  28677 + "dev": true,
28848 28678 "requires": {
28849 28679 "cssesc": "^3.0.0",
28850 28680 "util-deprecate": "^1.0.2"
... ... @@ -28873,7 +28703,8 @@
28873 28703 }
28874 28704 },
28875 28705 "postcss-value-parser": {
28876   - "version": "4.2.0"
  28706 + "version": "4.2.0",
  28707 + "dev": true
28877 28708 },
28878 28709 "posthtml": {
28879 28710 "version": "0.9.2",
... ... @@ -30137,9 +29968,6 @@
30137 29968 "version": "0.3.1",
30138 29969 "dev": true
30139 29970 },
30140   - "string-hash": {
30141   - "version": "1.1.3"
30142   - },
30143 29971 "string-length": {
30144 29972 "version": "4.0.2",
30145 29973 "dev": true,
... ... @@ -30813,6 +30641,11 @@
30813 30641 "version": "6.0.1",
30814 30642 "dev": true
30815 30643 },
  30644 + "throttle-debounce": {
  30645 + "version": "3.0.1",
  30646 + "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
  30647 + "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
  30648 + },
30816 30649 "through": {
30817 30650 "version": "2.3.8",
30818 30651 "dev": true
... ... @@ -30869,7 +30702,8 @@
30869 30702 "dev": true
30870 30703 },
30871 30704 "to-fast-properties": {
30872   - "version": "2.0.0"
  30705 + "version": "2.0.0",
  30706 + "dev": true
30873 30707 },
30874 30708 "to-object-path": {
30875 30709 "version": "0.3.0",
... ... @@ -31271,7 +31105,8 @@
31271 31105 "dev": true
31272 31106 },
31273 31107 "util-deprecate": {
31274   - "version": "1.0.2"
  31108 + "version": "1.0.2",
  31109 + "dev": true
31275 31110 },
31276 31111 "utils-merge": {
31277 31112 "version": "1.0.1",
... ... @@ -31721,38 +31556,18 @@
31721 31556 "vscode-languageserver-textdocument": "^1.0.1",
31722 31557 "vscode-pug-languageservice": "^0.27.24",
31723 31558 "vscode-typescript-languageservice": "^0.27.25"
31724   - },
31725   - "dependencies": {
31726   - "@vue/compiler-core": {
31727   - "version": "3.2.26",
31728   - "dev": true,
31729   - "requires": {
31730   - "@babel/parser": "^7.16.4",
31731   - "@vue/shared": "3.2.26",
31732   - "estree-walker": "^2.0.2",
31733   - "source-map": "^0.6.1"
31734   - }
31735   - },
31736   - "@vue/compiler-dom": {
31737   - "version": "3.2.26",
31738   - "dev": true,
31739   - "requires": {
31740   - "@vue/compiler-core": "3.2.26",
31741   - "@vue/shared": "3.2.26"
31742   - }
31743   - },
31744   - "@vue/shared": {
31745   - "version": "3.2.26",
31746   - "dev": true
31747   - }
31748 31559 }
31749 31560 },
31750 31561 "vue": {
31751   - "version": "3.2.2",
  31562 + "version": "3.2.33",
  31563 + "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz",
  31564 + "integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
31752 31565 "requires": {
31753   - "@vue/compiler-dom": "3.2.2",
31754   - "@vue/runtime-dom": "3.2.2",
31755   - "@vue/shared": "3.2.2"
  31566 + "@vue/compiler-dom": "3.2.33",
  31567 + "@vue/compiler-sfc": "3.2.33",
  31568 + "@vue/runtime-dom": "3.2.33",
  31569 + "@vue/server-renderer": "3.2.33",
  31570 + "@vue/shared": "3.2.33"
31756 31571 }
31757 31572 },
31758 31573 "vue-demi": {
... ... @@ -31820,6 +31635,16 @@
31820 31635 }
31821 31636 }
31822 31637 },
  31638 + "vue3-video-play": {
  31639 + "version": "1.3.1-beta.6",
  31640 + "resolved": "https://registry.npmjs.org/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz",
  31641 + "integrity": "sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw==",
  31642 + "requires": {
  31643 + "hls.js": "^1.0.10",
  31644 + "throttle-debounce": "^3.0.1",
  31645 + "vue": "^3.2.2"
  31646 + }
  31647 + },
31823 31648 "w3c-hr-time": {
31824 31649 "version": "1.0.2",
31825 31650 "dev": true,
... ...
... ... @@ -65,6 +65,7 @@
65 65 "vue-json-pretty": "^2.0.4",
66 66 "vue-router": "^4.0.11",
67 67 "vue-types": "^4.0.3",
  68 + "vue3-video-play": "^1.3.1-beta.6",
68 69 "xlsx": "^0.17.0"
69 70 },
70 71 "devDependencies": {
... ...
... ... @@ -13,6 +13,8 @@ import { setupStore } from '/@/store';
13 13 import { setupGlobDirectives } from '/@/directives';
14 14 import { setupI18n } from '/@/locales/setupI18n';
15 15 import { registerGlobComp } from '/@/components/registerGlobComp';
  16 +import vue3videoPlay from 'vue3-video-play'; // 引入组件
  17 +import 'vue3-video-play/dist/style.css'; // 引入css
16 18 if (import.meta.env.DEV) {
17 19 import('ant-design-vue/dist/antd.less');
18 20 }
... ... @@ -46,6 +48,8 @@ async function bootstrap() {
46 48 // https://next.router.vuejs.org/api/#isready
47 49 await router.isReady();
48 50
  51 + app.use(vue3videoPlay);
  52 +
49 53 app.mount('#app', true);
50 54 }
51 55
... ...
... ... @@ -7,7 +7,24 @@
7 7 width="30%"
8 8 @ok="handleSubmit"
9 9 >
10   - <BasicForm @register="registerForm" />
  10 + <BasicForm @register="registerForm">
  11 + <template #iconSelect>
  12 + <Upload
  13 + name="avatar"
  14 + list-type="picture-card"
  15 + class="avatar-uploader"
  16 + :show-upload-list="false"
  17 + :customRequest="customUpload"
  18 + :before-upload="beforeUpload"
  19 + >
  20 + <img v-if="tenantLogo" :src="tenantLogo" alt="avatar" />
  21 + <div v-else>
  22 + <plus-outlined />
  23 + <div class="ant-upload-text">上传</div>
  24 + </div>
  25 + </Upload>
  26 + </template>
  27 + </BasicForm>
11 28 </BasicDrawer>
12 29 </template>
13 30 <script lang="ts">
... ... @@ -16,16 +33,19 @@
16 33 import { formSchema } from './config.data';
17 34 import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
18 35 import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
19   -
  36 + import { message, Upload } from 'ant-design-vue';
20 37 import { useMessage } from '/@/hooks/web/useMessage';
  38 + import { PlusOutlined } from '@ant-design/icons-vue';
  39 + import { upload } from '/@/api/oss/ossFileUploader';
  40 + import { FileItem } from '/@/components/Upload/src/typing';
21 41
22 42 export default defineComponent({
23 43 name: 'ContactDrawer',
24   - components: { BasicDrawer, BasicForm },
  44 + components: { BasicDrawer, BasicForm, Upload, PlusOutlined },
25 45 emits: ['success', 'register'],
26 46 setup(_, { emit }) {
27 47 const isUpdate = ref(true);
28   -
  48 + const editId = ref('');
29 49 const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
30 50 labelWidth: 120,
31 51 schemas: formSchema,
... ... @@ -40,18 +60,56 @@
40 60 if (data.record.organizationDTO) {
41 61 await setFieldsValue(data.record);
42 62 } else {
  63 + editId.value = data.record.id;
  64 + tenantLogo.value = data.record?.avatar;
43 65 Reflect.deleteProperty(data.record, 'organizationId');
44 66 await setFieldsValue(data.record);
45 67 }
  68 + } else {
  69 + tenantLogo.value = '';
  70 + editId.value = '';
46 71 }
47 72 });
48 73
  74 + const tenantLogo = ref('');
  75 +
  76 + async function customUpload({ file }) {
  77 + if (beforeUpload(file)) {
  78 + const formData = new FormData();
  79 + formData.append('file', file);
  80 + const response = await upload(formData);
  81 + if (response.fileStaticUri) {
  82 + tenantLogo.value = response.fileStaticUri;
  83 + }
  84 + }
  85 + }
  86 +
  87 + const beforeUpload = (file: FileItem) => {
  88 + const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  89 + if (!isJpgOrPng) {
  90 + message.error('只能上传图片文件!');
  91 + }
  92 + const isLt2M = (file.size as number) / 1024 / 1024 < 2;
  93 + if (!isLt2M) {
  94 + message.error('图片大小不能超过2MB!');
  95 + }
  96 + return isJpgOrPng && isLt2M;
  97 + };
  98 +
49 99 const getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置'));
50 100
51 101 async function handleSubmit() {
52 102 try {
53 103 const { createMessage } = useMessage();
54 104 const values = await validate();
  105 + if (tenantLogo.value !== '') {
  106 + values.avatar = tenantLogo.value;
  107 + }
  108 + if (editId.value !== '') {
  109 + values.id = editId.value;
  110 + } else {
  111 + delete values.id;
  112 + }
55 113 setDrawerProps({ confirmLoading: true });
56 114 let saveMessage = '添加成功';
57 115 let updateMessage = '修改成功';
... ... @@ -69,6 +127,9 @@
69 127 registerDrawer,
70 128 registerForm,
71 129 handleSubmit,
  130 + customUpload,
  131 + beforeUpload,
  132 + tenantLogo,
72 133 };
73 134 },
74 135 });
... ...
  1 +<template>
  2 + <div>
  3 + <BasicModal
  4 + v-bind="$attrs"
  5 + width="55rem"
  6 + :height="heightNum"
  7 + @register="register"
  8 + title="视频预览"
  9 + @cancel="handleCancel"
  10 + :showOkBtn="false"
  11 + >
  12 + <div class="video-sty">
  13 + <div>
  14 + <vue3VideoPlay v-bind="options" :poster="videoPoster" />
  15 + </div>
  16 + </div>
  17 + </BasicModal>
  18 + </div>
  19 +</template>
  20 +<script lang="ts">
  21 + import { defineComponent, reactive, ref } from 'vue';
  22 + import { BasicModal, useModalInner } from '/@/components/Modal';
  23 +
  24 + export default defineComponent({
  25 + name: 'DialogPreviewVideo',
  26 + components: {
  27 + BasicModal,
  28 + },
  29 + emits: ['success', 'register'],
  30 + setup() {
  31 + let options: any = reactive({});
  32 + const videoPoster = ref('');
  33 + const heightNum = ref(800);
  34 + const [register] = useModalInner(async (data) => {
  35 + if (data) {
  36 + const fileText = data.record?.videoUrl.split('.').pop();
  37 + videoPoster.value = data.record?.avatar;
  38 + options.width = '800px'; //播放器高度
  39 + options.height = '500px'; //播放器高度
  40 + options.color = ''; //主题色
  41 + options.type =
  42 + fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : 'video/x-flv';
  43 + options.title = data.record?.name; //视频名称
  44 + options.src = data.record?.videoUrl; //视频源
  45 + options.muted = false; //静音
  46 + options.webFullScreen = false;
  47 + options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速
  48 + options.autoPlay = false; //自动播放
  49 + options.loop = false; //循环播放
  50 + options.mirror = false; //镜像画面
  51 + options.ligthOff = false; //关灯模式
  52 + options.volume = 0.3; //默认音量大小
  53 + options.control = true; //是否显示控制
  54 + options.controlBtns = [
  55 + 'audioTrack',
  56 + 'quality',
  57 + 'speedRate',
  58 + 'volume',
  59 + 'setting',
  60 + 'pip',
  61 + 'pageFullScreen',
  62 + 'fullScreen',
  63 + ]; //显示所有按钮,
  64 + }
  65 + });
  66 + const handleCancel = () => {};
  67 + return {
  68 + register,
  69 + handleCancel,
  70 + options,
  71 + heightNum,
  72 + videoPoster,
  73 + };
  74 + },
  75 + });
  76 +</script>
  77 +<style>
  78 + .video-sty {
  79 + width: 100%;
  80 + display: flex;
  81 + align-items: center;
  82 + justify-content: center;
  83 + }
  84 +</style>
... ...
... ... @@ -5,12 +5,18 @@ import { copyTransFun } from '/@/utils/fnUtils';
5 5 // 表格列数据
6 6 export const columns: BasicColumn[] = [
7 7 {
8   - title: '视频名字',
  8 + title: '封面',
  9 + dataIndex: 'avatar',
  10 + width: 80,
  11 + slots: { customRender: 'img' },
  12 + },
  13 + {
  14 + title: '名字',
9 15 dataIndex: 'name',
10 16 width: 120,
11 17 },
12 18 {
13   - title: '视频厂家',
  19 + title: '厂家',
14 20 dataIndex: 'brand',
15 21 width: 120,
16 22 },
... ... @@ -58,6 +64,12 @@ export const searchFormSchema: FormSchema[] = [
58 64 // 弹框配置项
59 65 export const formSchema: FormSchema[] = [
60 66 {
  67 + field: 'avatar',
  68 + label: '视频封面',
  69 + slot: 'iconSelect',
  70 + component: 'Input',
  71 + },
  72 + {
61 73 field: 'name',
62 74 label: '视频名字',
63 75 required: true,
... ...
... ... @@ -23,6 +23,18 @@
23 23 批量删除
24 24 </a-button>
25 25 </template>
  26 + <template #img="{ record }">
  27 + <TableImg
  28 + :size="30"
  29 + :showBadge="false"
  30 + :simpleShow="true"
  31 + :imgList="
  32 + typeof record.avatar !== 'undefined' && record.avatar !== '' && record.avatar != null
  33 + ? [record.avatar]
  34 + : null
  35 + "
  36 + />
  37 + </template>
26 38 <template #action="{ record }">
27 39 <TableAction
28 40 :actions="[
... ... @@ -51,12 +63,13 @@
51 63 </BasicTable>
52 64 </PageWrapper>
53 65 <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
  66 + <VideoPreviewModal @register="registerModal" />
54 67 </div>
55 68 </template>
56 69
57 70 <script lang="ts">
58 71 import { defineComponent, reactive, ref, computed } from 'vue';
59   - import { BasicTable, useTable, TableAction } from '/@/components/Table';
  72 + import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
60 73 import { PageWrapper } from '/@/components/Page';
61 74 import { useMessage } from '/@/hooks/web/useMessage';
62 75 import { useDrawer } from '/@/components/Drawer';
... ... @@ -64,6 +77,9 @@
64 77 import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
65 78 import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
66 79 import { searchFormSchema, columns } from './config.data';
  80 + import VideoPreviewModal from './DialogPreviewVideo.vue';
  81 + import { useModal } from '/@/components/Modal';
  82 +
67 83 export default defineComponent({
68 84 components: {
69 85 PageWrapper,
... ... @@ -71,6 +87,8 @@
71 87 BasicTable,
72 88 TableAction,
73 89 ContactDrawer,
  90 + VideoPreviewModal,
  91 + TableImg,
74 92 },
75 93 setup() {
76 94 let selectedRowIds = ref<string[]>([]);
... ... @@ -81,11 +99,13 @@
81 99 };
82 100 const searchInfo = reactive<Recordable>({});
83 101 const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
  102 + const [registerModal, { openModal }] = useModal();
84 103 // 表格hooks
85 104 const [registerTable, { reload }] = useTable({
86 105 title: '视频列表',
87 106 api: cameraPage,
88 107 columns,
  108 + showIndexColumn: false,
89 109 clickToRowSelect: false,
90 110 formConfig: {
91 111 labelWidth: 120,
... ... @@ -134,13 +154,13 @@
134 154 if (record) {
135 155 try {
136 156 await deleteCameraManage([record.id]);
137   - createMessage.success('删除联系人成功');
  157 + createMessage.success('删除视频成功');
138 158 handleSuccess();
139 159 } catch (e) {}
140 160 } else {
141 161 try {
142 162 await deleteCameraManage(selectedRowIds.value);
143   - createMessage.success('批量删除联系人成功');
  163 + createMessage.success('批量删除视频成功');
144 164 selectedRowIds.value = [];
145 165 handleSuccess();
146 166 } catch (e) {}
... ... @@ -152,8 +172,11 @@
152 172 searchInfo.organizationId = organizationId;
153 173 handleSuccess();
154 174 };
155   - const handleViewVideo = (r) => {
156   - console.log(r);
  175 + const handleViewVideo = (record) => {
  176 + openModal(true, {
  177 + isUpdate: true,
  178 + record,
  179 + });
157 180 };
158 181 return {
159 182 searchInfo,
... ... @@ -166,6 +189,7 @@
166 189 registerDrawer,
167 190 organizationIdTreeRef,
168 191 handleViewVideo,
  192 + registerModal,
169 193 };
170 194 },
171 195 });
... ...