设备管理，编辑用户，实时监控，消息中心，

index.html

@@ -10,4 +10,5 @@
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
+  <script type="text/javascript" src="/public/jessibuca/jessibuca.js"></script>
 </html>

package-lock.json

@@ -12,7 +12,7 @@
         "countup.js": "^2.8.0",
         "dayjs": "^1.11.11",
         "dayjs-ext": "^2.2.0",
-        "echarts": "^5.5.0",
+        "echarts": "^5.5.1",
         "element-plus": "^2.6.2",
         "mockjs": "^1.1.0",
         "pinia": "^2.1.7",
@@ -27,6 +27,7 @@
         "@vue/tsconfig": "^0.5.1",
         "@vueuse/core": "^10.9.0",
         "autoprefixer": "^10.4.19",
+        "naive-ui": "^2.39.0",
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.38",
         "sass": "^1.72.0",
@@ -71,6 +72,36 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.24.8",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.8.tgz",
+      "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==",
+      "dev": true,
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@css-render/plugin-bem": {
+      "version": "0.15.14",
+      "resolved": "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.14.tgz",
+      "integrity": "sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==",
+      "dev": true,
+      "peerDependencies": {
+        "css-render": "~0.15.14"
+      }
+    },
+    "node_modules/@css-render/vue3-ssr": {
+      "version": "0.15.14",
+      "resolved": "https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.14.tgz",
+      "integrity": "sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==",
+      "dev": true,
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/@ctrl/tinycolor": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
@@ -87,6 +118,12 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "dev": true
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -521,6 +558,12 @@
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
       "dev": true
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
+      "dev": true
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -772,15 +815,21 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmmirror.com/@types/katex/-/katex-0.16.7.tgz",
+      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
+      "dev": true
+    },
     "node_modules/@types/lodash": {
-      "version": "4.14.186",
+      "version": "4.17.7",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.7.tgz",
-      "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw=="
+      "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA=="
     },
     "node_modules/@types/lodash-es": {
-      "version": "4.17.6",
+      "version": "4.17.12",
-      "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
+      "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
-      "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
+      "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -1405,6 +1454,22 @@
         "node": ">=4.8"
       }
     },
+    "node_modules/css-render": {
+      "version": "0.15.14",
+      "resolved": "https://registry.npmmirror.com/css-render/-/css-render-0.15.14.tgz",
+      "integrity": "sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==",
+      "dev": true,
+      "dependencies": {
+        "@emotion/hash": "~0.8.0",
+        "csstype": "~3.0.5"
+      }
+    },
+    "node_modules/css-render/node_modules/csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
+      "dev": true
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1422,6 +1487,31 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
+      "dev": true,
+      "peerDependencies": {
+        "date-fns": "2.x"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.11",
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.11.tgz",
@@ -1496,12 +1586,12 @@
       "dev": true
     },
     "node_modules/echarts": {
-      "version": "5.5.0",
+      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
-      "integrity": "sha512-rNYnNCzqDAPCr4m/fqyUFv7fD9qIsd50S6GDFgO1DxZhncCsNsG7IfUlAlvZe5oSEQxtsjnHiUuppzccry93Xw==",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.5.0"
+        "zrender": "5.6.0"
       }
     },
     "node_modules/electron-to-chromium": {
@@ -1720,6 +1810,12 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/evtd": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",
+      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -2024,6 +2120,15 @@
         "he": "bin/he"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.10.0",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.10.0.tgz",
+      "integrity": "sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -2503,6 +2608,36 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/naive-ui": {
+      "version": "2.39.0",
+      "resolved": "https://registry.npmmirror.com/naive-ui/-/naive-ui-2.39.0.tgz",
+      "integrity": "sha512-5oUJzRG+rtLSH8eRU+fJvVYiQids2BxF9jp+fwGoAqHOptEINrBlgBu9uy+95RHE5FLJ7Q/z41o+qkoGnUrKxQ==",
+      "dev": true,
+      "dependencies": {
+        "@css-render/plugin-bem": "^0.15.12",
+        "@css-render/vue3-ssr": "^0.15.12",
+        "@types/katex": "^0.16.2",
+        "@types/lodash": "^4.14.198",
+        "@types/lodash-es": "^4.17.9",
+        "async-validator": "^4.2.5",
+        "css-render": "^0.15.12",
+        "csstype": "^3.1.3",
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^2.0.0",
+        "evtd": "^0.2.4",
+        "highlight.js": "^11.8.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "seemly": "^0.3.8",
+        "treemate": "^0.3.11",
+        "vdirs": "^0.1.8",
+        "vooks": "^0.2.12",
+        "vueuc": "^0.4.58"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3023,6 +3158,12 @@
         "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==",
+      "dev": true
+    },
     "node_modules/regexp.prototype.flags": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
@@ -3165,6 +3306,12 @@
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
       "dev": true
     },
+    "node_modules/seemly": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmmirror.com/seemly/-/seemly-0.3.8.tgz",
+      "integrity": "sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==",
+      "dev": true
+    },
     "node_modules/semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -3477,6 +3624,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/treemate": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz",
+      "integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg==",
+      "dev": true
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -3485,7 +3638,7 @@
     },
     "node_modules/tslib": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     },
     "node_modules/typescript": {
@@ -3797,6 +3950,18 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "node_modules/vdirs": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz",
+      "integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==",
+      "dev": true,
+      "dependencies": {
+        "evtd": "^0.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/vite": {
       "version": "5.2.6",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.6.tgz",
@@ -3852,6 +4017,18 @@
         }
       }
     },
+    "node_modules/vooks": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmmirror.com/vooks/-/vooks-0.2.12.tgz",
+      "integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==",
+      "dev": true,
+      "dependencies": {
+        "evtd": "^0.2.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.21",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.21.tgz",
@@ -3977,6 +4154,24 @@
         "node": ">=10"
       }
     },
+    "node_modules/vueuc": {
+      "version": "0.4.58",
+      "resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.58.tgz",
+      "integrity": "sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==",
+      "dev": true,
+      "dependencies": {
+        "@css-render/vue3-ssr": "^0.15.10",
+        "@juggle/resize-observer": "^3.3.1",
+        "css-render": "^0.15.10",
+        "evtd": "^0.2.4",
+        "seemly": "^0.3.6",
+        "vdirs": "^0.1.4",
+        "vooks": "^0.2.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -4042,9 +4237,9 @@
       }
     },
     "node_modules/zrender": {
-      "version": "5.5.0",
+      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.5.0.tgz",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
-      "integrity": "sha512-O3MilSi/9mwoovx77m6ROZM7sXShR/O/JIanvzTwjN3FORfLSr81PsUGd7jlaYOeds9d8tw82oP44+3YucVo+w==",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
       "dependencies": {
         "tslib": "2.3.0"
       }

package.json

@@ -15,7 +15,7 @@
     "countup.js": "^2.8.0",
     "dayjs": "^1.11.11",
     "dayjs-ext": "^2.2.0",
-    "echarts": "^5.5.0",
+    "echarts": "^5.5.1",
     "element-plus": "^2.6.2",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
@@ -30,6 +30,7 @@
     "@vue/tsconfig": "^0.5.1",
     "@vueuse/core": "^10.9.0",
     "autoprefixer": "^10.4.19",
+    "naive-ui": "^2.39.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "sass": "^1.72.0",

public/jessibuca/jessibuca.d.ts

@@ -0,0 +1,637 @@
+declare namespace Jessibuca {
+
+    /** 超时信息 */
+    enum TIMEOUT {
+        /** 当play()的时候，如果没有数据返回 */
+        loadingTimeout = 'loadingTimeout',
+        /** 当播放过程中，如果超过timeout之后没有数据渲染 */
+        delayTimeout = 'delayTimeout',
+    }
+
+    /** 错误信息 */
+    enum ERROR {
+        /** 播放错误，url 为空的时候，调用 play 方法 */
+        playError = 'playError',
+        /** http 请求失败 */
+        fetchError = 'fetchError',
+        /** websocket 请求失败 */
+        websocketError = 'websocketError',
+        /** webcodecs 解码 h265 失败 */
+        webcodecsH265NotSupport = 'webcodecsH265NotSupport',
+        /** mediaSource 解码 h265 失败 */
+        mediaSourceH265NotSupport = 'mediaSourceH265NotSupport',
+        /** wasm 解码失败 */
+        wasmDecodeError = 'wasmDecodeError',
+    }
+
+    interface Config {
+        /**
+         * 播放器容器
+         * *  若为 string ，则底层调用的是 document.getElementById('id')
+         * */
+        container: HTMLElement | string;
+        /**
+         * 设置最大缓冲时长，单位秒，播放器会自动消除延迟
+         */
+        videoBuffer?: number;
+        /**
+         * worker地址
+         * *  默认引用的是根目录下面的decoder.js文件 ，decoder.js 与 decoder.wasm文件必须是放在同一个目录下面。 */
+        decoder?: string;
+        /**
+         * 是否不使用离屏模式（提升渲染能力）
+         */
+        forceNoOffscreen?: boolean;
+        /**
+         * 是否开启当页面的'visibilityState'变为'hidden'的时候，自动暂停播放。
+         */
+        hiddenAutoPause?: boolean;
+        /**
+         * 是否有音频，如果设置`false`，则不对音频数据解码，提升性能。
+         */
+        hasAudio?: boolean;
+        /**
+         * 设置旋转角度，只支持，0(默认)，180，270 三个值
+         */
+        rotate?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)`
+         * 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
+         */
+        isResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全。等同于 `setScaleMode(2)`
+         */
+        isFullResize?: boolean;
+        /**
+         * 1. 当为`true`的时候：ws协议不检验是否以.flv为依据，进行协议解析。
+         */
+        isFlv?: boolean;
+        /**
+         * 是否开启控制台调试打
+         */
+        debug?: boolean;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前(loading)和播放中途(heart),如果超过设定时长无数据返回,则回调timeout事件
+         */
+        timeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        heartTimeout?: number;
+        /**
+         * 1. 设置超时时长, 单位秒
+         * 2. 在连接成功之前,如果超过设定时长无数据返回,则回调timeout事件
+         */
+        loadingTimeout?: number;
+        /**
+         * 是否支持屏幕的双击事件，触发全屏，取消全屏事件
+         */
+        supportDblclickFullscreen?: boolean;
+        /**
+         * 是否显示网
+         */
+        showBandwidth?: boolean;
+        /**
+         * 配置操作按钮
+         */
+        operateBtns?: {
+            /** 是否显示全屏按钮 */
+            fullscreen?: boolean;
+            /** 是否显示截图按钮 */
+            screenshot?: boolean;
+            /** 是否显示播放暂停按钮 */
+            play?: boolean;
+            /** 是否显示声音按钮 */
+            audio?: boolean;
+            /** 是否显示录制按 */
+            record?: boolean;
+        };
+        /**
+         * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
+         */
+        keepScreenOn?: boolean;
+        /**
+         * 是否开启声音，默认是关闭声音播放的
+         */
+        isNotMute?: boolean;
+        /**
+         * 加载过程中文案
+         */
+        loadingText?: string;
+        /**
+         * 背景图片
+         */
+        background?: string;
+        /**
+         * 是否开启MediaSource硬解码
+         * * 视频编码只支持H.264视频（Safari on iOS不支持）
+         * * 不支持 forceNoOffscreen 为 false (开启离屏渲染)
+         */
+        useMSE?: boolean;
+        /**
+         * 是否开启Webcodecs硬解码
+         * *  视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境)
+         * *  支持 forceNoOffscreen 为 false （开启离屏渲染)
+         * */
+        useWCS?: boolean;
+        /**
+         * 是否开启键盘快捷键
+         * 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
+         */
+        hotKey?: boolean;
+        /**
+         *  在使用MSE或者Webcodecs 播放H265的时候，是否自动降级到wasm模式。
+         *  设置为false 则直接关闭播放，抛出Error 异常，设置为true 则会自动切换成wasm模式播放。
+         */
+        autoWasm?: boolean;
+        /**
+         * heartTimeout 心跳超时之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        heartTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        heartTimeoutReplayTimes?: number,
+        /**
+         * loadingTimeout loading之后自动再播放,不再抛出异常，而直接重新播放视频地址。
+         */
+        loadingTimeoutReplay?: boolean,
+        /**
+         * heartTimeoutReplay 从试次数，超过之后，不再自动播放
+         */
+        loadingTimeoutReplayTimes?: number
+        /**
+         * wasm解码报错之后，不再抛出异常，而是直接重新播放视频地址。
+         */
+        wasmDecodeErrorReplay?: boolean,
+        /**
+         * https://github.com/langhuihui/jessibuca/issues/152 解决方案
+         * 例如：WebGL图像预处理默认每次取4字节的数据，但是540x960分辨率下的U、V分量宽度是540/2=270不能被4整除，导致绿屏。
+         */
+        openWebglAlignment?: boolean
+    }
+}
+
+
+declare class Jessibuca {
+
+    constructor(config?: Jessibuca.Config);
+
+    /**
+     * 是否开启控制台调试打印
+     @example
+     // 开启
+     jessibuca.setDebug(true)
+     // 关闭
+     jessibuca.setDebug(false)
+     */
+    setDebug(flag: boolean): void;
+
+    /**
+     * 静音
+     @example
+     jessibuca.mute()
+     */
+    mute(): void;
+
+    /**
+     * 取消静音
+     @example
+     jessibuca.cancelMute()
+     */
+    cancelMute(): void;
+
+    /**
+     * 留给上层用户操作来触发音频恢复的方法。
+     *
+     * iPhone，chrome等要求自动播放时，音频必须静音，需要由一个真实的用户交互操作来恢复，不能使用代码。
+     *
+     * https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+     */
+    audioResume(): void;
+
+    /**
+     *
+     * 设置超时时长, 单位秒
+     * 在连接成功之前和播放中途,如果超过设定时长无数据返回,则回调timeout事件
+
+     @example
+     jessibuca.setTimeout(10)
+
+     jessibuca.on('timeout',function(){
+        //
+    });
+     */
+    setTimeout(): void;
+
+    /**
+     * @param mode
+     *      0 视频画面完全填充canvas区域,画面会被拉伸  等同于参数 `isResize` 为false
+     *
+     *      1 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 等同于参数 `isResize` 为true
+     *
+     *      2 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 等同于参数 `isFullResize` 为true
+     @example
+     jessibuca.setScaleMode(0)
+
+     jessibuca.setScaleMode(1)
+
+     jessibuca.setScaleMode(2)
+     */
+    setScaleMode(mode: number): void;
+
+    /**
+     * 暂停播放
+     *
+     * 可以在pause 之后，再调用 `play()`方法就继续播放之前的流。
+     @example
+     jessibuca.pause().then(()=>{
+        console.log('pause success')
+
+        jessibuca.play().then(()=>{
+
+        }).catch((e)=>{
+
+        })
+
+    }).catch((e)=>{
+        console.log('pause error',e);
+    })
+     */
+    pause(): Promise<void>;
+
+    /**
+     * 关闭视频,不释放底层资源
+     @example
+     jessibuca.close();
+     */
+    close(): void;
+
+    /**
+     * 关闭视频，释放底层资源
+     @example
+     jessibuca.destroy()
+     */
+    destroy(): void;
+
+    /**
+     * 清理画布为黑色背景
+     @example
+     jessibuca.clearView()
+     */
+    clearView(): void;
+
+    /**
+     * 播放视频
+     @example
+
+     jessibuca.play('url').then(()=>{
+        console.log('play success')
+    }).catch((e)=>{
+        console.log('play error',e)
+    })
+     //
+     jessibuca.play()
+     */
+    play(url?: string): Promise<void>;
+
+    /**
+     * 重新调整视图大小
+     */
+    resize(): void;
+
+    /**
+     * 设置最大缓冲时长，单位秒，播放器会自动消除延迟。
+     *
+     * 等同于 `videoBuffer` 参数。
+     *
+     @example
+     // 设置 200ms 缓冲
+     jessibuca.setBufferTime(0.2)
+     */
+    setBufferTime(time: number): void;
+
+    /**
+     * 设置旋转角度，只支持，0(默认) ，180，270 三个值。
+     *
+     * > 可用于实现监控画面小窗和全屏效果，由于iOS没有全屏API，此方法可以模拟页面内全屏效果而且多端效果一致。   *
+     @example
+     jessibuca.setRotate(0)
+
+     jessibuca.setRotate(90)
+
+     jessibuca.setRotate(270)
+     */
+    setRotate(deg: number): void;
+
+    /**
+     *
+     * 设置音量大小，取值0 — 1
+     *
+     * > 区别于 mute 和 cancelMute 方法，虽然设置setVolume(0) 也能达到 mute方法，但是mute 方法是不调用底层播放音频的，能提高性能。而setVolume(0)只是把声音设置为0 ，以达到效果。
+     * @param volume 当为0时，完全无声;当为1时，最大音量，默认值
+     @example
+     jessibuca.setVolume(0.2)
+
+     jessibuca.setVolume(0)
+
+     jessibuca.setVolume(1)
+     */
+    setVolume(volume: number): void;
+
+    /**
+     * 返回是否加载完毕
+     @example
+     var result = jessibuca.hasLoaded()
+     console.log(result) // true
+     */
+    hasLoaded(): boolean;
+
+    /**
+     * 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮。
+     * H5目前在chrome\edge 84, android chrome 84及以上有原生亮屏API, 需要是https页面
+     * 其余平台为模拟实现，此时为兼容实现，并不保证所有浏览器都支持
+     @example
+     jessibuca.setKeepScreenOn()
+     */
+    setKeepScreenOn(): boolean;
+
+    /**
+     * 全屏(取消全屏)播放视频
+     @example
+     jessibuca.setFullscreen(true)
+     //
+     jessibuca.setFullscreen(false)
+     */
+    setFullscreen(flag: boolean): void;
+
+    /**
+     *
+     * 截图，调用后弹出下载框保存截图
+     * @param filename 可选参数, 保存的文件名, 默认 `时间戳`
+     * @param format   可选参数, 截图的格式，可选png或jpeg或者webp ,默认 `png`
+     * @param quality  可选参数, 当格式是jpeg或者webp时，压缩质量，取值0 ~ 1 ,默认 `0.92`
+     * @param type 可选参数, 可选download或者base64或者blob，默认`download`
+
+     @example
+
+     jessibuca.screenshot("test","png",0.5)
+
+     const base64 = jessibuca.screenshot("test","png",0.5,'base64')
+
+     const fileBlob = jessibuca.screenshot("test",'blob')
+     */
+    screenshot(filename?: string, format?: string, quality?: number, type?: string): void;
+
+    /**
+     * 开始录制。
+     * @param fileName 可选，默认时间戳
+     * @param fileType 可选，默认webm，支持webm 和mp4 格式
+
+     @example
+     jessibuca.startRecord('xxx','webm')
+     */
+    startRecord(fileName: string, fileType: string): void;
+
+    /**
+     * 暂停录制并下载。
+     @example
+     jessibuca.stopRecordAndSave()
+     */
+    stopRecordAndSave(): void;
+
+    /**
+     * 返回是否正在播放中状态。
+     @example
+     var result = jessibuca.isPlaying()
+     console.log(result) // true
+     */
+    isPlaying(): boolean;
+
+    /**
+     *   返回是否静音。
+     @example
+     var result = jessibuca.isMute()
+     console.log(result) // true
+     */
+    isMute(): boolean;
+
+    /**
+     * 返回是否正在录制。
+     @example
+     var result = jessibuca.isRecording()
+     console.log(result) // true
+     */
+    isRecording(): boolean;
+
+
+    /**
+     * 监听 jessibuca 初始化事件
+     * @example
+     * jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: 'load', callback: () => void): void;
+
+    /**
+     * 视频播放持续时间，单位ms
+     * @example
+     * jessibuca.on('timeUpdate',function (ts) {console.log('timeUpdate',ts);})
+     */
+    on(event: 'timeUpdate', callback: () => void): void;
+
+    /**
+     * 当解析出视频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("videoInfo",function(data){console.log('width:',data.width,'height:',data.width)})
+     */
+    on(event: 'videoInfo', callback: (data: {
+        /** 视频宽 */
+        width: number;
+        /** 视频高 */
+        height: number;
+    }) => void): void;
+
+    /**
+     * 当解析出音频信息时回调，2个回调参数
+     * @example
+     * jessibuca.on("audioInfo",function(data){console.log('numOfChannels:',data.numOfChannels,'sampleRate',data.sampleRate)})
+     */
+    on(event: 'audioInfo', callback: (data: {
+        /** 声频通道 */
+        numOfChannels: number;
+        /** 采样率 */
+        sampleRate: number;
+    }) => void): void;
+
+    /**
+     * 信息，包含错误信息
+     * @example
+     * jessibuca.on("log",function(data){console.log('data:',data)})
+     */
+    on(event: 'log', callback: () => void): void;
+
+    /**
+     * 错误信息
+     * @example
+     * jessibuca.on("error",function(error){
+        if(error === Jessibuca.ERROR.fetchError){
+            //
+        }
+        else if(error === Jessibuca.ERROR.webcodecsH265NotSupport){
+            //
+        }
+        console.log('error:',error)
+    })
+     */
+    on(event: 'error', callback: (err: Jessibuca.ERROR) => void): void;
+
+    /**
+     * 当前网速， 单位KB 每秒1次,
+     * @example
+     * jessibuca.on("kBps",function(data){console.log('kBps:',data)})
+     */
+    on(event: 'kBps', callback: (value: number) => void): void;
+
+    /**
+     * 渲染开始
+     * @example
+     * jessibuca.on("start",function(){console.log('start render')})
+     */
+    on(event: 'start', callback: () => void): void;
+
+    /**
+     * 当设定的超时时间内无数据返回,则回调
+     * @example
+     * jessibuca.on("timeout",function(error){console.log('timeout:',error)})
+     */
+    on(event: 'timeout', callback: (error: Jessibuca.TIMEOUT) => void): void;
+
+    /**
+     * 当play()的时候，如果没有数据返回，则回调
+     * @example
+     * jessibuca.on("loadingTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'loadingTimeout', callback: () => void): void;
+
+    /**
+     * 当播放过程中，如果超过timeout之后没有数据渲染，则抛出异常。
+     * @example
+     * jessibuca.on("delayTimeout",function(){console.log('timeout')})
+     */
+    on(event: 'delayTimeout', callback: () => void): void;
+
+    /**
+     * 当前是否全屏
+     * @example
+     * jessibuca.on("fullscreen",function(flag){console.log('is fullscreen',flag)})
+     */
+    on(event: 'fullscreen', callback: () => void): void;
+
+    /**
+     * 触发播放事件
+     * @example
+     * jessibuca.on("play",function(flag){console.log('play')})
+     */
+    on(event: 'play', callback: () => void): void;
+
+    /**
+     * 触发暂停事件
+     * @example
+     * jessibuca.on("pause",function(flag){console.log('pause')})
+     */
+    on(event: 'pause', callback: () => void): void;
+
+    /**
+     * 触发声音事件，返回boolean值
+     * @example
+     * jessibuca.on("mute",function(flag){console.log('is mute',flag)})
+     */
+    on(event: 'mute', callback: () => void): void;
+
+    /**
+     * 流状态统计，流开始播放后回调，每秒1次。
+     * @example
+     * jessibuca.on("stats",function(s){console.log("stats is",s)})
+     */
+    on(event: 'stats', callback: (stats: {
+        /** 当前缓冲区时长，单位毫秒 */
+        buf: number;
+        /** 当前视频帧率 */
+        fps: number;
+        /** 当前音频码率，单位byte */
+        abps: number;
+        /** 当前视频码率，单位byte */
+        vbps: number;
+        /** 当前视频帧pts，单位毫秒 */
+        ts: number;
+    }) => void): void;
+
+    /**
+     * 渲染性能统计，流开始播放后回调，每秒1次。
+     * @param performance 0: 表示卡顿,1: 表示流畅,2: 表示非常流程
+     * @example
+     * jessibuca.on("performance",function(performance){console.log("performance is",performance)})
+     */
+    on(event: 'performance', callback: (performance: 0 | 1 | 2) => void): void;
+
+    /**
+     * 录制开始的事件
+
+     * @example
+     * jessibuca.on("recordStart",function(){console.log("record start")})
+     */
+    on(event: 'recordStart', callback: () => void): void;
+
+    /**
+     * 录制结束的事件
+
+     * @example
+     * jessibuca.on("recordEnd",function(){console.log("record end")})
+     */
+    on(event: 'recordEnd', callback: () => void): void;
+
+    /**
+     * 录制的时候，返回的录制时长，1s一次
+
+     * @example
+     * jessibuca.on("recordingTimestamp",function(timestamp){console.log("recordingTimestamp is",timestamp)})
+     */
+    on(event: 'recordingTimestamp', callback: (timestamp: number) => void): void;
+
+    /**
+     * 监听调用play方法 经过 初始化-> 网络请求-> 解封装 -> 解码 -> 渲染 一系列过程的时间消耗
+     * @param event
+     * @param callback
+     */
+    on(event: 'playToRenderTimes', callback: (times: {
+        playInitStart: number, // 1 初始化
+        playStart: number, // 2 初始化
+        streamStart: number, // 3 网络请求
+        streamResponse: number, // 4 网络请求
+        demuxStart: number, // 5 解封装
+        decodeStart: number, // 6 解码
+        videoStart: number, // 7 渲染
+        playTimestamp: number,// playStart- playInitStart
+        streamTimestamp: number,// streamStart - playStart
+        streamResponseTimestamp: number,// streamResponse - streamStart
+        demuxTimestamp: number, // demuxStart - streamResponse
+        decodeTimestamp: number, // decodeStart - demuxStart
+        videoTimestamp: number,// videoStart - decodeStart
+        allTimestamp: number // videoStart - playInitStart
+    }) => void): void
+
+    /**
+     * 监听方法
+     *
+     @example
+
+     jessibuca.on("load",function(){console.log('load')})
+     */
+    on(event: string, callback: Function): void;
+
+}
+
+export default Jessibuca;

src/assets/css/main.scss

@@ -95,4 +95,11 @@ html .el-message {
     display: flex;
     min-height: calc(100% - 60px);
     justify-content: space-between;
-  }
+  }
+.naiveui-table-wrapper {
+  background-color: transparent !important;
+}
+
+.naiveui-table-wrapper .n-table__body {
+  background-color: transparent !important;
+}

src/main.ts

@@ -5,7 +5,12 @@ import router from './router'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 确保这里的路径是正确的
 import '@/assets/css/main.scss'
 import '@/assets/css/tailwind.css'
-
+import {
+    // component
+    NButton,
+    // create naive ui
+    create
+  } from 'naive-ui'
 import { registerEcharts } from "@/plugins/echarts"
 import  ElementPlus   from 'element-plus'
 
@@ -13,11 +18,14 @@ import  ElementPlus   from 'element-plus'
 import { mockXHR } from "@/mock/index";
 
 mockXHR()
-
+const naive = create({
+    components: [NButton]
+  })
 const app = createApp(App)
 registerEcharts(app)
 app.use(ElementPlus, { locale: zhCn })
 app.use(createPinia())
 app.use(router)
+app.use(naive)
 
 app.mount('#app')

src/router/index.ts

@@ -37,6 +37,18 @@ const routes: Array<RouteRecordRaw> = [
         meta: { requiresAuth: true },
       },
       {
+        path: '/monitoring',
+        name: 'monitoring',
+        component: () => import('@/views/index/monitoring.vue'),
+        meta: { requiresAuth: true },
+      },
+      {
+        path: '/management',
+        name: 'management',
+        component: () => import('@/views/index/device-management.vue'),
+        meta: { requiresAuth: true },
+      },
+      {
         path: '/login',
         name: 'login',
         component: Login,

src/views/index/device-edit.vue

@@ -0,0 +1,141 @@
+<template>
+    <ItemWrap class="adduser-items" title="设备编辑">
+        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
+            label-width="auto" class="demo-ruleForm">
+            <el-form-item label="设备名称" prop="pass">
+                <el-input v-model="ruleForm.pass" type="text" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="SN" prop="checkPass">
+                <el-input v-model="ruleForm.checkPass" type="text" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="xxx" prop="age">
+                <el-input v-model.number="ruleForm.age" />
+            </el-form-item>
+            <el-form-item class="button-group">
+                <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn">
+                    提交
+                </el-button>
+                <el-button @click="resetForm(ruleFormRef)" class="btn">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </ItemWrap>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const ruleFormRef = ref<FormInstance>()
+
+const checkAge = (rule: any, value: any, callback: any) => {
+    if (!value) {
+        return callback(new Error('Please input the age'))
+    }
+    setTimeout(() => {
+        if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'))
+        } else {
+            if (value < 18) {
+                callback(new Error('Age must be greater than 18'))
+            } else {
+                callback()
+            }
+        }
+    }, 1000)
+}
+
+const validatePass = (rule: any, value: any, callback: any) => {
+    if (value === '') {
+        callback(new Error('Please input the password'))
+    } else {
+        if (ruleForm.checkPass !== '') {
+            if (!ruleFormRef.value) return
+            ruleFormRef.value.validateField('checkPass')
+        }
+        callback()
+    }
+}
+const validatePass2 = (rule: any, value: any, callback: any) => {
+    if (value === '') {
+        callback(new Error('Please input the password again'))
+    } else if (value !== ruleForm.pass) {
+        callback(new Error("Two inputs don't match!"))
+    } else {
+        callback()
+    }
+}
+
+const ruleForm = reactive({
+    pass: '',
+    checkPass: '',
+    age: '',
+})
+
+const rules = reactive<FormRules<typeof ruleForm>>({
+    pass: [{ validator: validatePass, trigger: 'blur' }],
+    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+    age: [{ validator: checkAge, trigger: 'blur' }],
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.validate((valid) => {
+        if (valid) {
+            console.log('submit!')
+        } else {
+            console.log('error submit!')
+        }
+    })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+}
+</script>
+<style scoped>
+::v-deep .el-form * {
+    background-color: transparent !important;
+}
+
+.demo-ruleForm {
+    margin: auto;
+    text-align: center;
+    font-size: 20px;
+    margin-top: 120px;
+}
+
+.adduser-items {
+    font-size: 25px;
+    width: 100%;
+    height: 500px;
+}
+
+.button-group {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.btn {
+    margin-top: 100px;
+}
+
+::v-deep .el-input{
+    font-size: 30px;
+    width: 100%;
+    height: 50px;
+    color: rgb(255, 255, 255);
+    border-color: rgb(0, 0, 0);
+}
+::v-deep .el-form-item__label {
+    font-size: 20px; /* 修改字体大小 */
+    color: #765ff8; /* 修改字体颜色 */
+}
+::v-deep .el-button {
+    font-size: 16px;
+    color: #ffffff;
+}
+</style>

src/views/index/device-management.vue

@@ -0,0 +1,231 @@
+<template>
+  <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
+  <ItemWrap class="contetn_left-bottom contetn_lr-item" title="设备管理">
+    <n-button strong secondary type="info" class="back-home-btn btn-add" size="large"
+      @click="showAddUser">添加设备</n-button>
+    <el-dialog v-model="isAddUserVisible">
+      <Adduser @close="isAddUserVisible = false"></Adduser>
+    </el-dialog>
+
+    <el-dialog v-model="isshowEdit">
+      <deviceEdit @close="isshowEdit = false"></deviceEdit>
+    </el-dialog>
+    <div class="user_skills" style="margin-top:30px;">
+      <n-table striped class="eltables" :bordered="true">
+        <thead>
+          <tr>
+            <th>设备名称</th>
+            <th>SN</th>
+            <th>设备地址</th>
+            <th>添加时间</th>
+            <th>通知状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in tableData">
+            <td>{{ item.warntype }}</td>
+            <td>{{ item.detail }}</td>
+            <td>{{ item.address }}</td>
+            <td>{{ item.date }}</td>
+            <td>{{ item.state }}</td>
+            <td>
+              <n-button strong secondary type="info" size="large" @click="showEdit"
+                style="margin-right: 5px;">编辑</n-button>
+              <n-button strong secondary type="error" size="large" @click="handleDelete(index)">删除</n-button>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
+    </div>
+    <el-pagination class="pagination" background layout="prev, pager, next" :total="totalItems" :page-size="pageSize"
+      :current-page="currentPage" @current-change="handleCurrentChange" />
+  </ItemWrap>
+</template>
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import CapsuleChart from "@/components/datav/capsule-chart";
+import { ranking } from "@/api";
+import { ElMessage } from "element-plus";
+import { NInput, NTable, NPagination } from "naive-ui";
+
+import Adduser from "./adduser.vue";
+import deviceEdit from "./device-edit.vue";
+const tableData = [
+  {
+    warntype: '断电报警',
+    date: '2016-05-03',
+    detail: '设备断电报警',
+    address: 'No. 189, Grove St, Los Angeles',
+    state: 'No',
+  },
+  {
+    warntype: '断电报警',
+    date: '2016-05-03',
+    detail: '设备断电报警',
+    address: 'No. 189, Grove St, Los Angeles',
+    state: 'No',
+  },
+  {
+    warntype: '断电报警',
+    date: '2016-05-03',
+    detail: '设备断电报警',
+    address: 'No. 189, Grove St, Los Angeles',
+    state: 'No',
+  },
+  {
+    warntype: '断电报警',
+    date: '2016-05-03',
+    detail: '设备断电报警',
+    address: 'No. 189, Grove St, Los Angeles',
+    state: 'No',
+  },
+];
+const isAddUserVisible = ref(false);
+const isshowEdit = ref(false);
+const page = ref(1);
+const showAddUser = () => {
+  isAddUserVisible.value = true;
+};
+const showEdit = () => {
+  isshowEdit.value = true;
+};
+// 分页相关状态
+const pageSize = ref(10); // 每页显示的条目数
+const currentPage = ref(1); // 当前页码
+const totalItems = ref(tableData.length); // 总条目数
+
+// 根据当前页码和每页大小计算显示的数据
+// const displayedTableData = computed(() => {
+//   const start = (currentPage.value - 1) * pageSize.value;
+//   const end = start + pageSize.value;
+//   return tableData.slice(start, end);
+// });
+
+// 当前页码改变时触发的方法
+const handleCurrentChange = (val: number) => {
+  currentPage.value = val;
+};
+</script>
+
+
+
+<style scoped>
+.contetn_lr-item {
+  font-size: 30px;
+  margin-top: 80px;
+  height: 800px;
+}
+
+.eltables {
+  width: 100%;
+  font-size: large;
+  text-align: center;
+  margin-top: 80px;
+}
+
+.back-home-btn {
+  position: absolute;
+  margin-top: 30px;
+  top: 10px;
+  left: 10px;
+}
+
+.btn-add {
+  margin-top: 50px;
+  margin-left: 90%;
+}
+
+.user_skills {
+  width: 100%;
+  margin-top: 50%;
+  text-align: center;
+  font-size: larger;
+}
+
+::v-deep .el-dialog {
+  position: relative;
+  /* 确保伪元素定位正确 */
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+::v-deep .el-dialog::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  /* 确保伪元素在内容之下 */
+  background-color: inherit;
+  /* 继承父元素的背景色 */
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+/* naive */
+.eltables {
+  background-color: transparent !important;
+  font-size: 20px;
+  text-align: center;
+  border: none;
+}
+
+.eltables th {
+  background-color: transparent !important;
+  color: #006ff0;
+  border: none;
+}
+
+.eltables td {
+  background-color: transparent !important;
+  color: #009ffb;
+  border: none;
+}
+
+.eltables td:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+  /* 半透明的灰色背景 */
+}
+
+::v-deep .pagination {
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  margin-right: 15px;
+  margin-top: 280px;
+}
+
+/* 使分页器中的按钮背景透明 */
+::v-deep .el-pagination button,
+::v-deep .el-pagination .btn-quicknext,
+::v-deep .el-pagination .btn-next,
+::v-deep .el-pagination .btn-prev,
+::v-deep .el-pagination .btn-quickprev {
+  height: 40px;
+  width: 40px;
+  font-size: 20px;
+  background-color: rgba(17, 0, 255, 0.3) !important;
+  /* 半透明灰色 */
+  border-color: rgba(128, 128, 128, 0.3) !important;
+}
+
+/* 使分页器中的数字和链接透明 */
+::v-deep .el-pagination .el-pager li {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
+/* 当鼠标悬停或激活时，保持背景透明 */
+::v-deep .el-pagination button:hover,
+::v-deep .el-pagination button:focus,
+::v-deep .el-pagination .el-pager li:hover,
+::v-deep .el-pagination .el-pager li.is-active {
+  height: 40px;
+  width: 40px;
+  font-size: 16px;
+  background-color: rgba(104, 3, 255, 0.5) !important;
+  /* 加深的半透明灰色 */
+}
+</style>

src/views/index/edituser.vue

@@ -0,0 +1,141 @@
+<template>
+    <ItemWrap class="adduser-items" title="编辑用户">
+        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
+            label-width="auto" class="demo-ruleForm">
+            <el-form-item label="用户名" prop="pass">
+                <el-input v-model="ruleForm.pass" type="text" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="密码" prop="checkPass">
+                <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
+            </el-form-item>
+            <el-form-item label="菜单权限" prop="age">
+                <el-input v-model.number="ruleForm.age" />
+            </el-form-item>
+            <el-form-item class="button-group">
+                <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn">
+                    提交
+                </el-button>
+                <el-button @click="resetForm(ruleFormRef)" class="btn">重置</el-button>
+            </el-form-item>
+        </el-form>
+    </ItemWrap>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+
+const ruleFormRef = ref<FormInstance>()
+
+const checkAge = (rule: any, value: any, callback: any) => {
+    if (!value) {
+        return callback(new Error('Please input the age'))
+    }
+    setTimeout(() => {
+        if (!Number.isInteger(value)) {
+            callback(new Error('Please input digits'))
+        } else {
+            if (value < 18) {
+                callback(new Error('Age must be greater than 18'))
+            } else {
+                callback()
+            }
+        }
+    }, 1000)
+}
+
+const validatePass = (rule: any, value: any, callback: any) => {
+    if (value === '') {
+        callback(new Error('Please input the password'))
+    } else {
+        if (ruleForm.checkPass !== '') {
+            if (!ruleFormRef.value) return
+            ruleFormRef.value.validateField('checkPass')
+        }
+        callback()
+    }
+}
+const validatePass2 = (rule: any, value: any, callback: any) => {
+    if (value === '') {
+        callback(new Error('Please input the password again'))
+    } else if (value !== ruleForm.pass) {
+        callback(new Error("Two inputs don't match!"))
+    } else {
+        callback()
+    }
+}
+
+const ruleForm = reactive({
+    pass: '',
+    checkPass: '',
+    age: '',
+})
+
+const rules = reactive<FormRules<typeof ruleForm>>({
+    pass: [{ validator: validatePass, trigger: 'blur' }],
+    checkPass: [{ validator: validatePass2, trigger: 'blur' }],
+    age: [{ validator: checkAge, trigger: 'blur' }],
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.validate((valid) => {
+        if (valid) {
+            console.log('submit!')
+        } else {
+            console.log('error submit!')
+        }
+    })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.resetFields()
+}
+</script>
+<style scoped>
+::v-deep .el-form * {
+    background-color: transparent !important;
+}
+
+.demo-ruleForm {
+    margin: auto;
+    text-align: center;
+    font-size: 20px;
+    margin-top: 120px;
+}
+
+.adduser-items {
+    font-size: 25px;
+    width: 100%;
+    height: 500px;
+}
+
+.button-group {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.btn {
+    margin-top: 100px;
+}
+
+::v-deep .el-input{
+    font-size: 30px;
+    width: 100%;
+    height: 50px;
+    color: rgb(255, 255, 255);
+    border-color: rgb(0, 0, 0);
+}
+::v-deep .el-form-item__label {
+    font-size: 20px; /* 修改字体大小 */
+    color: #765ff8; /* 修改字体颜色 */
+}
+::v-deep .el-button {
+    font-size: 16px;
+    color: #ffffff;
+}
+</style>

src/views/index/jessiBucaPlay.vue

@@ -0,0 +1,136 @@
+<template>
+    <div :style="{ height: props.videoHeight, paddingTop: 0 }" class="video_box">
+        <template v-if="props.videoUrl">
+            <div class="video_big">
+                <div class="container" :id="'jessibuca-' + props.videoId"
+                    :style="{ height: props.videoHeight, paddingTop: 0 }"></div>
+            </div>
+        </template>
+        <template v-else>
+            <div>暂无视频数据</div>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import { watchEffect } from "vue";
+import { getCurrentInstance } from 'vue';
+import { ref } from "vue";
+import { nextTick } from 'vue';
+import { onBeforeUnmount } from 'vue';
+const { proxy } = getCurrentInstance();
+const props = defineProps({
+    videoId: {
+        type: [String, Number],
+        default: "",
+    },
+    videoUrl: {
+        type: String,
+        default: "",
+    },
+    // 浏览器后台是否播放
+    isBackPlay: {
+        type: Boolean,
+        default: true,
+    },
+    videoHeight: {
+        type: String,
+        default: "100px",
+    },
+});
+const videoDom = ref(null);
+const init = () => {
+    createVideo();
+};
+// 创建视频
+// 官方地址 http://jessibuca.monibuca.com/api.html#loadingtimeout-1
+const createVideo = () => {
+    nextTick(() => {
+        videoDom.value = new window.Jessibuca({
+            container: document.getElementById(`jessibuca-${props.videoId}`),
+            videoBuffer: 0.2, // 缓存时长
+            isResize: false, // 是否拉伸
+            decoder: "/jessibuca/decoder.js",
+            heartTimeoutReplay: 3, // 超时重连次数
+            loadingText: "加载中,请稍后", // 加载提示
+            showBandwidth: true, // 显示网速
+            hiddenAutoPause: !props.isBackPlay, //浏览器后台是否播放
+            supportDblclickFullscreen: true, //双击全屏
+            controlAutoHide: true, // 控制栏自动隐藏
+            operateBtns: {
+                fullscreen: true,
+                screenshot: true,
+                play: false,
+                audio: true,
+            },
+            forceNoOffscreen: true,
+            isNotMute: false,
+        });
+        videoDom.value.on("load", () => {
+            videoDom.value.play(props.videoUrl);
+        });
+        videoDom.value.on("error", (error) => {
+            switch (error) {
+                case "fetchError":
+                    proxy.$modal.msgError("视频请求失败");
+                    break;
+                case "playError":
+                    proxy.$modal.msgError("视频播放错误");
+                    break;
+                case "websocketError":
+                    proxy.$modal.msgError("WebSocket 请求失败");
+                    break;
+                case "webcodecsH265NotSupport":
+                    proxy.$modal.msgError("WebCodecs 解码 h265 失败");
+                    break;
+                case "mediaSourceH265NotSupport":
+                    proxy.$modal.msgError("MediaSource 解码 h265 失败");
+                    break;
+                case "wasmDecodeError":
+                    proxy.$modal.msgError(" wasm 解码失败");
+                    break;
+            }
+        });
+        videoDom.value.on("timeout", () => {
+            proxy.$modal.msgError("视频请求超时");
+        });
+    });
+};
+// 销毁视频
+const destroyVideo = () => {
+    console.log("销毁视频");
+    videoDom.value.destroy();
+    videoDom.value = null;
+};
+watchEffect(() => {
+    if (props.videoUrl) {
+        init();
+    }
+});
+onBeforeUnmount(() => {
+    if (videoDom.value) {
+        destroyVideo();
+    }
+});
+</script>
+<style lang="scss" scoped>
+.container {
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+}
+
+.video_box {
+    width: 400px;
+    height: 500px;
+    /* 设置背景图片路径 */
+    background-image: url("@/assets/images/television.png");
+    /* 设置背景图片不重复 */
+    background-repeat: no-repeat;
+    /* 设置背景图片居中 */
+    background-position: center;
+    /* 设置元素的背景颜色 */
+    background-color: #002b62;
+    border-radius: 10px;
+}
+</style>

src/views/index/monitoring.vue

@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
+    <div class="selectoption">
+      <!-- <el-select :popper-append-to-body="false" v-model="selectedLineType" placeholder="请选择视频显示模式"
+        class="select-line-type">
+        <el-option label="一路" value="alone"></el-option>
+        <el-option label="四路" value="fourWays"></el-option>
+        <el-option label="九路" value="nineWays"></el-option>
+        <el-option label="十六路" value="sixteen"></el-option>
+      </el-select> -->
+      <!-- <n-select v-model:value="selectedLineType" class="select-line-type" :options="options" placeholder="请选择" /> -->
+      <div class="btngroup">
+      <n-button strong secondary type="info" class="tech-button" @click="selectedLineType='alone'">单屏</n-button>
+      <n-button strong secondary type="info" class="tech-button" @click="selectedLineType='fourWays'">四屏</n-button>
+      <n-button strong secondary type="info" class="tech-button" @click="selectedLineType='nineWays'">九屏</n-button>
+      <n-button strong secondary type="info" class="tech-button" @click="selectedLineType='sixteen'">十六屏</n-button>
+    </div>
+    </div>
+    <ItemWrap title="实时监控" class="mainitem">
+      <div class="app-container main-div">
+        <!-- "alone", "fourWays", "nineWays", "sixteen" -->
+        <videoController :lineType="selectedLineType"  :videoUrls="videoUrls"></videoController>
+      </div>
+    </ItemWrap>
+  </div>
+
+</template>
+
+<script setup name="Index">
+import videoController from "./videoController.vue";
+import ItemWrap from "@/components/item-wrap";
+import { NSelect,NButton } from "naive-ui";
+import { ref, reactive } from "vue";
+const selectedLineType = ref('sixteen'); // 默认为十六路
+
+const videoUrls = ref([
+  "https://www.adwest.cn/public/uploads/image/20240227/125244_735.mp4",
+  "http://192.168.1.102:800/live/test1.flv",
+  "http://192.168.1.102:800/live/test2.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+  "http://192.168.1.102:800/live/test.flv",
+]);
+const options = reactive([
+  {
+    label: "一路",
+    value: "alone",
+  },
+  {
+    label: "四路",
+    value: "fourWays",
+  },
+  {
+    label: "九路",
+    value: "nineWays",
+  },
+  {
+    label: "十六路",
+    value: "sixteen",
+  },
+])
+</script>
+
+<style scoped>
+.mainitem {
+  margin-top: 10px;
+  font-size: 30px;
+  height: 940px;
+  align-items: center;
+}
+
+.main-div {
+  padding: 0 !important;
+  margin-top: 30px;
+  width: 100%;
+}
+
+.back-home-btn {
+  position: absolute;
+  margin-top: 30px;
+  top: 10px;
+  left: 20px;
+}
+
+::v-deep .select-line-type {
+  width: 200px;
+  top: 10px;
+  left: 85%;
+  border: none;
+  background-color: transparent !important;
+}
+ 
+::v-deep(.n-select) {
+  /* 覆盖NSelect根元素的背景色 */
+  background-color: transparent !important;
+
+  /* 覆盖下拉列表的背景色 */
+  .n-select-dropdown {
+    background-color: transparent !important;
+  }
+
+  /* 覆盖其他可能影响背景色的元素 */
+  .n-input__inner,
+  .n-input-affix__content {
+    background-color: transparent !important;
+  }
+}
+.btngroup{
+  margin-top: 15px;
+  display: flex;
+  justify-content: center;
+}
+.tech-button{
+  margin-left: 10px;
+  width: 100px;
+}
+
+</style>

src/views/index/user.vue

@@ -1,20 +1,39 @@
 <template>
-  <el-button type="primary" @click="$router.push('/')" class="back-home-btn">返回首页</el-button>
+  <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
   <ItemWrap class="contetn_left-bottom contetn_lr-item" title="用户管理">
-    <el-button type="primary" class="back-home-btn btn-add" @click="showAddUser">添加用户</el-button>
+    <n-button strong secondary type="info" size="large" class="back-home-btn btn-add" @click="showAddUser">添加用户</n-button>
     <el-dialog v-model="isAddUserVisible">
       <Adduser @close="isAddUserVisible = false"></Adduser>
     </el-dialog>
+    <el-dialog v-model="isshowEdit">
+      <Edituser @close="isshowEdit = false"></Edituser>
+    </el-dialog>
     <div class="user_skills" style="margin-top:20px;">
-      <el-table :data="tableData" class="eltables">
+      <n-table striped class="eltables" :bordered="true">
-        <el-table-column prop="date" label="时间"/>
+        <thead>
-        <el-table-column prop="name" label="用户名" width="180" />
+          <tr>
-        <el-table-column prop="address" label="地址" />
+            <th>添加时间</th>
-        <el-table-column label="操作">
+            <th>用户名</th>
-          <el-button type="primary" size="mini" @click="">编辑</el-button>
+            <th>用户地址</th>
-          <el-button type="danger" size="mini" @click="">删除</el-button>
+            <th>状态</th>
-        </el-table-column>
+            <th>操作</th>
-      </el-table>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, index) in tableData">
+            <td>{{ item.date }}</td>
+            <td>{{ item.name }}</td>
+            <td>{{ item.address }}</td>
+            <td>{{ item.state }}</td>
+            <td>
+              <n-button strong secondary type="info" size="large" @click="showEdit"
+                style="margin-right: 5px;" class="edtbtn">编辑</n-button>
+              <n-button strong secondary type="warning" class="edtbtn" size="large" @click="handleDelete(index)">禁用</n-button>
+              <n-button strong secondary type="error" class="edtbtn" size="large" @click="handleDelete(index)">删除</n-button>
+            </td>
+          </tr>
+        </tbody>
+      </n-table>
     </div>
   </ItemWrap>
 </template>
@@ -24,32 +43,43 @@ import CapsuleChart from "@/components/datav/capsule-chart";
 import { ranking } from "@/api";
 import { ElMessage } from "element-plus";
 import Adduser from "./adduser.vue";
+import { NInput, NTable, NPagination } from "naive-ui";
+import Edituser from "./edituser.vue";
 const tableData = [
   {
     date: '2016-05-03',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles',
+    state:'No'
   },
   {
     date: '2016-05-02',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles',
+    state:'No'
   },
   {
     date: '2016-05-04',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles',
+    state:'No'
   },
   {
     date: '2016-05-01',
     name: 'Tom',
     address: 'No. 189, Grove St, Los Angeles',
+    state:'No'
   },
 ]
 const isAddUserVisible = ref(false);
+const isshowEdit = ref(false);
+
 const showAddUser = () => {
   isAddUserVisible.value = true;
 };
+const showEdit = () => {
+  isshowEdit.value = true;
+};
 
 </script>
 
@@ -70,7 +100,6 @@ const showAddUser = () => {
 }
 
 .back-home-btn {
-  background-color: transparent;
   position: absolute;
   margin-top: 30px;
   top: 10px;
@@ -82,101 +111,59 @@ const showAddUser = () => {
   margin-left: 85%;
 }
 
-.user_skills {
-  width: 100%;
-  margin-top: 50%;
-  text-align: center;
-  font-size: larger;
-}
-
-.user_skills ::v-deep .el-table--fit {
-  padding: 20px;
-}
-
-.user_skills ::v-deep .el-table,
-.el-table__expanded-cell {
-  background-color: transparent;
-}
-
-.user_skills ::v-deep .el-table tr {
-  background-color: transparent !important;
-}
-
-.user_skills ::v-deep .el-table--enable-row-transition .el-table__body td,
-.el-table .cell {
-  background-color: transparent;
-}
-
-::v-deep .el-table::before {
-  content: "";
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 0px;
-  background-color: transparent;
-}
 ::v-deep .el-dialog__body {
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.user_skills ::v-deep .el-table__body tr:hover>td {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.user_skills ::v-deep .el-table thead th {
-  background-color: transparent;
-}
 
-.user_skills ::v-deep .el-table__body tr:hover>td {
+::v-deep .el-dialog {
-  background-color: rgba(255, 255, 255, 0.2);
+  position: relative;
-}
+  /* 确保伪元素定位正确 */
-.user_skills ::v-deep .el-table {
+  background-color: rgba(255, 255, 255, 0.1);
-  border: none;
 }
 
-.user_skills ::v-deep .el-table::after {
+::v-deep .el-dialog::before {
-  content: '';
+  content: "";
   position: absolute;
+  top: 0;
   left: 0;
-  bottom: 0;
   right: 0;
-  border-bottom: none !important;
+  bottom: 0;
-  height: 0;
+  z-index: -1;
+  /* 确保伪元素在内容之下 */
+  background-color: inherit;
+  /* 继承父元素的背景色 */
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(10px);
 }
 
-.user_skills ::v-deep .el-table td,
+/* naive */
-.user_skills ::v-deep .el-table th {
+.eltables {
+  background-color: transparent !important;
+  font-size: 20px;
   text-align: center;
-  vertical-align: middle;
-  color: aqua;
   border: none;
-  height: 0px;
 }
 
-.user_skills ::v-deep .el-table,
+.eltables th {
-.user_skills ::v-deep .el-table * {
+  background-color: transparent !important;
-  border: none !important;
+  color: #006ff0;
-  box-shadow: none !important;
+  border: none;
-
 }
 
-::v-deep .el-dialog {
+.eltables td {
-  position: relative; /* 确保伪元素定位正确 */
+  background-color: transparent !important;
-  background-color: rgba(255, 255, 255, 0.1);
+  color: #009ffb;
+  border: none;
 }
 
-::v-deep .el-dialog::before {
+.eltables td:hover {
-  content: "";
+  background-color: rgba(0, 0, 0, 0.1);
-  position: absolute;
+  /* 半透明的灰色背景 */
-  top: 0;
+}
-  left: 0;
+.edtbtn{
-  right: 0;
+  margin-left: 10px;
-  bottom: 0;
-  z-index: -1; /* 确保伪元素在内容之下 */
-  background-color: inherit; /* 继承父元素的背景色 */
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(10px);
 }
 
 </style>

src/views/index/videoController.vue

@@ -0,0 +1,154 @@
+<template>
+    
+    <div
+      class="jessibuca-root"
+      id="jessibuca"
+      :style="{
+        height: MHeight + 'px',
+        gap: props.space + 'px',
+        padding: props.margin + 'px',
+      }"
+      :class="BigClass"
+    >
+      <template v-if="videoNum > 0">
+        <div
+          class="container-shell"
+          v-for="item in videoNum"
+          :key="item"
+        >
+          <jessiBucaPlay
+            :videoHeight="videoHeight"
+            :isBackPlay="props.isBackPlay"
+            :videoId="item"
+            :videoUrl="props.videoUrls[item - 1]"></jessiBucaPlay>
+        </div>
+      </template>
+      <template v-else>
+        <div>暂无视频数据</div>
+      </template>
+    </div>
+  </template>
+  
+  <script setup>
+  import jessiBucaPlay from "./jessiBucaPlay.vue";
+  import { watchEffect } from "vue";
+  import { ref } from "vue";
+  import { nextTick } from 'vue';
+  import { onBeforeUnmount } from 'vue';
+  import { getCurrentInstance } from 'vue';
+
+  const props = defineProps({
+    videoUrls: {
+      type: Array,
+      default: () => [],
+    },
+    // 路线类型(一路,四路,九路,十六路)
+    lineType: {
+      type: String,
+      default: "alone",
+      validator: (value) =>
+        ["alone", "fourWays", "nineWays", "sixteen"].includes(value)
+          ? true
+          : "无效参数",
+    },
+    // 间距
+    space: {
+      type: Number,
+      default: 5,
+    },
+    // 边距
+    margin: {
+      type: Number,
+      default: 2,
+    },
+    // 浏览器后台是否播放
+    isBackPlay: {
+      type: Boolean,
+      default: true,
+    },
+  });
+  const MHeight = ref(window.innerHeight - 84);
+  const videoHeight = ref("100px");
+  const videoNum = ref(0);
+  const BigClass = ref('');
+  const init = () => {
+    switch (props.lineType) {
+      case "alone":
+        videoNum.value = 1;
+        BigClass.value = "";
+        break;
+      case "fourWays":
+        videoNum.value = 4;
+        BigClass.value = "video-fourWays";
+        break;
+      case "nineWays":
+        videoNum.value = 9;
+        BigClass.value = "video-nineWays";
+        break;
+      case "sixteen":
+        videoNum.value = 16;
+        BigClass.value = "video-sixteen";
+        break;
+      default:
+        videoNum.value = 1;
+        BigClass.value = "";
+        break;
+    }
+    nextTick(() => {
+      this.updatePlayerDomSize();
+    });
+  };
+  
+  // 更新播放器大小
+  const updatePlayerDomSize = () => {
+    let ways = 1;
+    switch (videoNum.value) {
+      case 1:
+        ways = 1;
+        break;
+      case 4:
+        ways = 2;
+        break;
+      case 9:
+        ways = 3;
+        break;
+      case 16:
+        ways = 4;
+        break;
+    }
+    videoHeight.value =
+      (MHeight.value - props.space * (ways - 1) - props.margin * 2) / ways + "px";
+  };
+  
+  watchEffect(() => {
+    props.lineType;
+    props.videoUrls;
+    init();
+  });
+  onBeforeUnmount(() => {
+    document.getElementById("jessibuca").remove();
+  });
+  </script>
+  <style lang="scss" scoped>
+  .jessibuca-root {
+    display: grid;
+    width: 100%;
+    min-width: 1000px;
+    height: 100%;
+    min-height: 600px;
+    overflow: auto;
+  }
+  // 四路
+  .video-fourWays {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  // 九路
+  .video-nineWays {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  // 十六路
+  .video-sixteen {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  </style>
+