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

fengtao
1 parent 732fcbab
Showing 8 changed files with 421 additions and 410 deletions
.env.development
package-lock.json
package.json
src/main.ts
src/views/camera/manage/ContactDrawer.vue
src/views/camera/manage/DialogPreviewVideo.vue
src/views/camera/manage/config.data.ts
src/views/camera/manage/index.vue
--- a/.env.development
View file @df8309f
+++ b/.env.development
View file @df8309f
@@ -13,10 +13,10 @@ VITE_PUBLIC_PATH = /
 # 线上演示环境
 # VITE_PROXY = [["/api","http://101.133.234.90:8080/api"]]
 # 线上测试环境
-VITE_PROXY = [["/api","http://47.99.141.212:8080/api"]]
+VITE_PROXY = [["/api","https://dev.thingskit.com/api"]]
 # 实时数据的ws地址
-VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
+VITE_WEB_SOCKET = wss://dev.thingskit.com/api/ws/plugins/telemetry?token=
 # Delete console
 VITE_DROP_CONSOLE = true
--- a/package-lock.json
View file @df8309f
+++ b/package-lock.json
View file @df8309f
@@ -34,11 +34,12 @@
         "sortablejs": "^1.14.0",
         "tinymce": "^5.8.2",
         "vditor": "^3.8.6",
-        "vue": "3.2.2",
+        "vue": "^3.2.31",
         "vue-i18n": "9.1.7",
         "vue-json-pretty": "^2.0.4",
         "vue-router": "^4.0.11",
         "vue-types": "^4.0.3",
+        "vue3-video-play": "^1.3.1-beta.6",
         "xlsx": "^0.17.0"
       },
       "devDependencies": {
@@ -64,7 +65,7 @@
         "@vitejs/plugin-legacy": "^1.5.1",
         "@vitejs/plugin-vue": "^1.4.0",
         "@vitejs/plugin-vue-jsx": "^1.1.7",
-        "@vue/compiler-sfc": "3.2.2",
+        "@vue/compiler-sfc": "^3.2.31",
         "@vue/test-utils": "^2.0.0-rc.12",
         "autoprefixer": "^10.3.1",
         "commitizen": "^4.2.4",
@@ -501,6 +502,7 @@
     },
     "node_modules/@babel/helper-validator-identifier": {
       "version": "7.16.7",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -1741,6 +1743,7 @@
     },
     "node_modules/@babel/types": {
       "version": "7.16.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.16.7",
@@ -3671,68 +3674,49 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.2",
-      "license": "MIT",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
+      "integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
       "dependencies": {
-        "@babel/parser": "^7.12.0",
-        "@babel/types": "^7.12.0",
-        "@vue/shared": "3.2.2",
-        "estree-walker": "^2.0.1",
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.33",
+        "estree-walker": "^2.0.2",
         "source-map": "^0.6.1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.2",
-      "license": "MIT",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
+      "integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.2",
-        "@vue/shared": "3.2.2"
+        "@vue/compiler-core": "3.2.33",
+        "@vue/shared": "3.2.33"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.2",
-      "license": "MIT",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
+      "integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
       "dependencies": {
-        "@babel/parser": "^7.13.9",
-        "@babel/types": "^7.13.0",
-        "@types/estree": "^0.0.48",
-        "@vue/compiler-core": "3.2.2",
-        "@vue/compiler-dom": "3.2.2",
-        "@vue/compiler-ssr": "3.2.2",
-        "@vue/shared": "3.2.2",
-        "consolidate": "^0.16.0",
-        "estree-walker": "^2.0.1",
-        "hash-sum": "^2.0.0",
-        "lru-cache": "^5.1.1",
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.33",
+        "@vue/compiler-dom": "3.2.33",
+        "@vue/compiler-ssr": "3.2.33",
+        "@vue/reactivity-transform": "3.2.33",
+        "@vue/shared": "3.2.33",
+        "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
-        "merge-source-map": "^1.1.0",
         "postcss": "^8.1.10",
-        "postcss-modules": "^4.0.0",
-        "postcss-selector-parser": "^6.0.4",
         "source-map": "^0.6.1"
       }
     },
-    "node_modules/@vue/compiler-sfc/node_modules/@types/estree": {
-      "version": "0.0.48",
-      "license": "MIT"
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/lru-cache": {
-      "version": "5.1.1",
-      "license": "ISC",
-      "dependencies": {
-        "yallist": "^3.0.2"
-      }
-    },
-    "node_modules/@vue/compiler-sfc/node_modules/yallist": {
-      "version": "3.1.1",
-      "license": "ISC"
-    },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.2",
-      "license": "MIT",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
+      "integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.2",
-        "@vue/shared": "3.2.2"
+        "@vue/compiler-dom": "3.2.33",
+        "@vue/shared": "3.2.33"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -3740,45 +3724,60 @@
       "license": "MIT"
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.26",
-      "dev": true,
-      "license": "MIT",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
+      "integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
       "dependencies": {
-        "@vue/shared": "3.2.26"
+        "@vue/shared": "3.2.33"
       }
     },
-    "node_modules/@vue/reactivity/node_modules/@vue/shared": {
-      "version": "3.2.26",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@vue/runtime-core": {
-      "version": "3.2.2",
-      "license": "MIT",
+    "node_modules/@vue/reactivity-transform": {
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
+      "integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
       "dependencies": {
-        "@vue/reactivity": "3.2.2",
-        "@vue/shared": "3.2.2"
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.33",
+        "@vue/shared": "3.2.33",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
       }
     },
-    "node_modules/@vue/runtime-core/node_modules/@vue/reactivity": {
-      "version": "3.2.2",
-      "license": "MIT",
+    "node_modules/@vue/runtime-core": {
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
+      "integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
       "dependencies": {
-        "@vue/shared": "3.2.2"
+        "@vue/reactivity": "3.2.33",
+        "@vue/shared": "3.2.33"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.2",
-      "license": "MIT",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
+      "integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.2",
-        "@vue/shared": "3.2.2",
+        "@vue/runtime-core": "3.2.33",
+        "@vue/shared": "3.2.33",
         "csstype": "^2.6.8"
       }
     },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
+      "integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
+      "dependencies": {
+        "@vue/compiler-ssr": "3.2.33",
+        "@vue/shared": "3.2.33"
+      },
+      "peerDependencies": {
+        "vue": "3.2.33"
+      }
+    },
     "node_modules/@vue/shared": {
-      "version": "3.2.2",
-      "license": "MIT"
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
+      "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.0.0-rc.18",
@@ -4898,6 +4897,7 @@
     },
     "node_modules/bluebird": {
       "version": "3.7.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/boolbase": {
@@ -5928,16 +5928,6 @@
       "version": "0.1.1",
       "dev": true
     },
-    "node_modules/consolidate": {
-      "version": "0.16.0",
-      "license": "MIT",
-      "dependencies": {
-        "bluebird": "^3.7.2"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
     "node_modules/constant-case": {
       "version": "3.0.4",
       "dev": true,
@@ -6565,6 +6555,7 @@
     },
     "node_modules/cssesc": {
       "version": "3.0.0",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -6606,8 +6597,9 @@
       "license": "MIT"
     },
     "node_modules/csstype": {
-      "version": "2.6.19",
-      "license": "MIT"
+      "version": "2.6.20",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
     "node_modules/currently-unhandled": {
       "version": "0.4.1",
@@ -8807,20 +8799,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/generic-names": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "loader-utils": "^3.2.0"
-      }
-    },
-    "node_modules/generic-names/node_modules/loader-utils": {
-      "version": "3.2.0",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 12.13.0"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "dev": true,
@@ -9315,6 +9293,7 @@
     },
     "node_modules/hash-sum": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/he": {
@@ -9334,6 +9313,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.1.5.tgz",
+      "integrity": "sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA=="
+    },
     "node_modules/homedir-polyfill": {
       "version": "1.0.3",
       "dev": true,
@@ -9580,20 +9564,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/icss-replace-symbols": {
-      "version": "1.1.0",
-      "license": "ISC"
-    },
-    "node_modules/icss-utils": {
-      "version": "5.1.0",
-      "license": "ISC",
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/idb": {
       "version": "6.1.5",
       "dev": true,
@@ -12147,10 +12117,6 @@
       "version": "4.17.21",
       "license": "MIT"
     },
-    "node_modules/lodash.camelcase": {
-      "version": "4.3.0",
-      "license": "MIT"
-    },
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "dev": true,
@@ -12707,13 +12673,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/merge-source-map": {
-      "version": "1.1.0",
-      "license": "MIT",
-      "dependencies": {
-        "source-map": "^0.6.1"
-      }
-    },
     "node_modules/merge-stream": {
       "version": "2.0.0",
       "dev": true,
@@ -14178,74 +14137,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/postcss-modules": {
-      "version": "4.3.0",
-      "license": "MIT",
-      "dependencies": {
-        "generic-names": "^4.0.0",
-        "icss-replace-symbols": "^1.1.0",
-        "lodash.camelcase": "^4.3.0",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "string-hash": "^1.1.1"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-modules-extract-imports": {
-      "version": "3.0.0",
-      "license": "ISC",
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-modules-scope": {
-      "version": "3.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
-    "node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "license": "ISC",
-      "dependencies": {
-        "icss-utils": "^5.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/postcss-resolve-nested-selector": {
       "version": "0.1.1",
       "dev": true,
@@ -14347,6 +14238,7 @@
     },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -14391,6 +14283,7 @@
     },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/posthtml": {
@@ -16263,10 +16156,6 @@
         "node": ">=0.6.19"
       }
     },
-    "node_modules/string-hash": {
-      "version": "1.1.3",
-      "license": "CC0-1.0"
-    },
     "node_modules/string-length": {
       "version": "4.0.2",
       "dev": true,
@@ -17280,6 +17169,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "dev": true,
@@ -17357,6 +17254,7 @@
     },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -18030,6 +17928,7 @@
     },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/utils-merge": {
@@ -18655,38 +18554,16 @@
         "vscode-typescript-languageservice": "^0.27.25"
       }
     },
-    "node_modules/vscode-vue-languageservice/node_modules/@vue/compiler-core": {
-      "version": "3.2.26",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.26",
-        "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
-      }
-    },
-    "node_modules/vscode-vue-languageservice/node_modules/@vue/compiler-dom": {
-      "version": "3.2.26",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@vue/compiler-core": "3.2.26",
-        "@vue/shared": "3.2.26"
-      }
-    },
-    "node_modules/vscode-vue-languageservice/node_modules/@vue/shared": {
-      "version": "3.2.26",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/vue": {
-      "version": "3.2.2",
-      "license": "MIT",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz",
+      "integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.2",
-        "@vue/runtime-dom": "3.2.2",
-        "@vue/shared": "3.2.2"
+        "@vue/compiler-dom": "3.2.33",
+        "@vue/compiler-sfc": "3.2.33",
+        "@vue/runtime-dom": "3.2.33",
+        "@vue/server-renderer": "3.2.33",
+        "@vue/shared": "3.2.33"
       }
     },
     "node_modules/vue-demi": {
@@ -18820,6 +18697,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/vue3-video-play": {
+      "version": "1.3.1-beta.6",
+      "resolved": "https://registry.npmjs.org/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz",
+      "integrity": "sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw==",
+      "dependencies": {
+        "hls.js": "^1.0.10",
+        "throttle-debounce": "^3.0.1",
+        "vue": "^3.2.2"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "dev": true,
@@ -19703,7 +19590,8 @@
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.16.7"
+      "version": "7.16.7",
+      "dev": true
     },
     "@babel/helper-validator-option": {
       "version": "7.16.7",
@@ -20437,6 +20325,7 @@
     },
     "@babel/types": {
       "version": "7.16.8",
+      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
@@ -21828,106 +21717,106 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.2",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.33.tgz",
+      "integrity": "sha512-AAmr52ji3Zhk7IKIuigX2osWWsb2nQE5xsdFYjdnmtQ4gymmqXbjLvkSE174+fF3A3kstYrTgGkqgOEbsdLDpw==",
       "requires": {
-        "@babel/parser": "^7.12.0",
-        "@babel/types": "^7.12.0",
-        "@vue/shared": "3.2.2",
-        "estree-walker": "^2.0.1",
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.33",
+        "estree-walker": "^2.0.2",
         "source-map": "^0.6.1"
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.2",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.33.tgz",
+      "integrity": "sha512-GhiG1C8X98Xz9QUX/RlA6/kgPBWJkjq0Rq6//5XTAGSYrTMBgcLpP9+CnlUg1TFxnnCVughAG+KZl28XJqw8uQ==",
       "requires": {
-        "@vue/compiler-core": "3.2.2",
-        "@vue/shared": "3.2.2"
+        "@vue/compiler-core": "3.2.33",
+        "@vue/shared": "3.2.33"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.2",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.33.tgz",
+      "integrity": "sha512-H8D0WqagCr295pQjUYyO8P3IejM3vEzeCO1apzByAEaAR/WimhMYczHfZVvlCE/9yBaEu/eu9RdiWr0kF8b71Q==",
       "requires": {
-        "@babel/parser": "^7.13.9",
-        "@babel/types": "^7.13.0",
-        "@types/estree": "^0.0.48",
-        "@vue/compiler-core": "3.2.2",
-        "@vue/compiler-dom": "3.2.2",
-        "@vue/compiler-ssr": "3.2.2",
-        "@vue/shared": "3.2.2",
-        "consolidate": "^0.16.0",
-        "estree-walker": "^2.0.1",
-        "hash-sum": "^2.0.0",
-        "lru-cache": "^5.1.1",
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.33",
+        "@vue/compiler-dom": "3.2.33",
+        "@vue/compiler-ssr": "3.2.33",
+        "@vue/reactivity-transform": "3.2.33",
+        "@vue/shared": "3.2.33",
+        "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
-        "merge-source-map": "^1.1.0",
         "postcss": "^8.1.10",
-        "postcss-modules": "^4.0.0",
-        "postcss-selector-parser": "^6.0.4",
         "source-map": "^0.6.1"
-      },
-      "dependencies": {
-        "@types/estree": {
-          "version": "0.0.48"
-        },
-        "lru-cache": {
-          "version": "5.1.1",
-          "requires": {
-            "yallist": "^3.0.2"
-          }
-        },
-        "yallist": {
-          "version": "3.1.1"
-        }
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.2",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.33.tgz",
+      "integrity": "sha512-XQh1Xdk3VquDpXsnoCd7JnMoWec9CfAzQDQsaMcSU79OrrO2PNR0ErlIjm/mGq3GmBfkQjzZACV+7GhfRB8xMQ==",
       "requires": {
-        "@vue/compiler-dom": "3.2.2",
-        "@vue/shared": "3.2.2"
+        "@vue/compiler-dom": "3.2.33",
+        "@vue/shared": "3.2.33"
       }
     },
     "@vue/devtools-api": {
       "version": "6.0.0-beta.21.1"
     },
     "@vue/reactivity": {
-      "version": "3.2.26",
-      "dev": true,
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.33.tgz",
+      "integrity": "sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==",
       "requires": {
-        "@vue/shared": "3.2.26"
-      },
-      "dependencies": {
-        "@vue/shared": {
-          "version": "3.2.26",
-          "dev": true
-        }
+        "@vue/shared": "3.2.33"
+      }
+    },
+    "@vue/reactivity-transform": {
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.33.tgz",
+      "integrity": "sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.33",
+        "@vue/shared": "3.2.33",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.2",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.33.tgz",
+      "integrity": "sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==",
       "requires": {
-        "@vue/reactivity": "3.2.2",
-        "@vue/shared": "3.2.2"
-      },
-      "dependencies": {
-        "@vue/reactivity": {
-          "version": "3.2.2",
-          "requires": {
-            "@vue/shared": "3.2.2"
-          }
-        }
+        "@vue/reactivity": "3.2.33",
+        "@vue/shared": "3.2.33"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.2",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.33.tgz",
+      "integrity": "sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==",
       "requires": {
-        "@vue/runtime-core": "3.2.2",
-        "@vue/shared": "3.2.2",
+        "@vue/runtime-core": "3.2.33",
+        "@vue/shared": "3.2.33",
         "csstype": "^2.6.8"
       }
     },
+    "@vue/server-renderer": {
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.33.tgz",
+      "integrity": "sha512-4jpJHRD4ORv8PlbYi+/MfP8ec1okz6rybe36MdpkDrGIdEItHEUyaHSKvz+ptNEyQpALmmVfRteHkU9F8vxOew==",
+      "requires": {
+        "@vue/compiler-ssr": "3.2.33",
+        "@vue/shared": "3.2.33"
+      }
+    },
     "@vue/shared": {
-      "version": "3.2.2"
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.33.tgz",
+      "integrity": "sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg=="
     },
     "@vue/test-utils": {
       "version": "2.0.0-rc.18",
@@ -22670,7 +22559,8 @@
       }
     },
     "bluebird": {
-      "version": "3.7.2"
+      "version": "3.7.2",
+      "dev": true
     },
     "boolbase": {
       "version": "1.0.0",
@@ -23358,12 +23248,6 @@
       "version": "0.1.1",
       "dev": true
     },
-    "consolidate": {
-      "version": "0.16.0",
-      "requires": {
-        "bluebird": "^3.7.2"
-      }
-    },
     "constant-case": {
       "version": "3.0.4",
       "dev": true,
@@ -23779,7 +23663,8 @@
       "dev": true
     },
     "cssesc": {
-      "version": "3.0.0"
+      "version": "3.0.0",
+      "dev": true
     },
     "csso": {
       "version": "4.2.0",
@@ -23806,7 +23691,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.19"
+      "version": "2.6.20",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
+      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -25243,17 +25130,6 @@
       "version": "1.0.1",
       "dev": true
     },
-    "generic-names": {
-      "version": "4.0.0",
-      "requires": {
-        "loader-utils": "^3.2.0"
-      },
-      "dependencies": {
-        "loader-utils": {
-          "version": "3.2.0"
-        }
-      }
-    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "dev": true
@@ -25559,7 +25435,8 @@
       }
     },
     "hash-sum": {
-      "version": "2.0.0"
+      "version": "2.0.0",
+      "dev": true
     },
     "he": {
       "version": "1.2.0",
@@ -25573,6 +25450,11 @@
         "tslib": "^2.0.3"
       }
     },
+    "hls.js": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.1.5.tgz",
+      "integrity": "sha512-mQX5TSNtJEzGo5HPpvcQgCu+BWoKDQM6YYtg/KbgWkmVAcqOCvSTi0SuqG2ZJLXxIzdnFcKU2z7Mrw/YQWhPOA=="
+    },
     "homedir-polyfill": {
       "version": "1.0.3",
       "dev": true,
@@ -25744,13 +25626,6 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
-    "icss-replace-symbols": {
-      "version": "1.1.0"
-    },
-    "icss-utils": {
-      "version": "5.1.0",
-      "requires": {}
-    },
     "idb": {
       "version": "6.1.5",
       "dev": true
@@ -27449,9 +27324,6 @@
     "lodash-es": {
       "version": "4.17.21"
     },
-    "lodash.camelcase": {
-      "version": "4.3.0"
-    },
     "lodash.debounce": {
       "version": "4.0.8",
       "dev": true
@@ -27818,12 +27690,6 @@
         "is-plain-obj": "^1.1"
       }
     },
-    "merge-source-map": {
-      "version": "1.1.0",
-      "requires": {
-        "source-map": "^0.6.1"
-      }
-    },
     "merge-stream": {
       "version": "2.0.0",
       "dev": true
@@ -28738,43 +28604,6 @@
       "version": "0.2.3",
       "dev": true
     },
-    "postcss-modules": {
-      "version": "4.3.0",
-      "requires": {
-        "generic-names": "^4.0.0",
-        "icss-replace-symbols": "^1.1.0",
-        "lodash.camelcase": "^4.3.0",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "string-hash": "^1.1.1"
-      }
-    },
-    "postcss-modules-extract-imports": {
-      "version": "3.0.0",
-      "requires": {}
-    },
-    "postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "requires": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-modules-scope": {
-      "version": "3.0.0",
-      "requires": {
-        "postcss-selector-parser": "^6.0.4"
-      }
-    },
-    "postcss-modules-values": {
-      "version": "4.0.0",
-      "requires": {
-        "icss-utils": "^5.0.0"
-      }
-    },
     "postcss-resolve-nested-selector": {
       "version": "0.1.1",
       "dev": true
@@ -28845,6 +28674,7 @@
     },
     "postcss-selector-parser": {
       "version": "6.0.8",
+      "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -28873,7 +28703,8 @@
       }
     },
     "postcss-value-parser": {
-      "version": "4.2.0"
+      "version": "4.2.0",
+      "dev": true
     },
     "posthtml": {
       "version": "0.9.2",
@@ -30137,9 +29968,6 @@
       "version": "0.3.1",
       "dev": true
     },
-    "string-hash": {
-      "version": "1.1.3"
-    },
     "string-length": {
       "version": "4.0.2",
       "dev": true,
@@ -30813,6 +30641,11 @@
       "version": "6.0.1",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg=="
+    },
     "through": {
       "version": "2.3.8",
       "dev": true
@@ -30869,7 +30702,8 @@
       "dev": true
     },
     "to-fast-properties": {
-      "version": "2.0.0"
+      "version": "2.0.0",
+      "dev": true
     },
     "to-object-path": {
       "version": "0.3.0",
@@ -31271,7 +31105,8 @@
       "dev": true
     },
     "util-deprecate": {
-      "version": "1.0.2"
+      "version": "1.0.2",
+      "dev": true
     },
     "utils-merge": {
       "version": "1.0.1",
@@ -31721,38 +31556,18 @@
         "vscode-languageserver-textdocument": "^1.0.1",
         "vscode-pug-languageservice": "^0.27.24",
         "vscode-typescript-languageservice": "^0.27.25"
-      },
-      "dependencies": {
-        "@vue/compiler-core": {
-          "version": "3.2.26",
-          "dev": true,
-          "requires": {
-            "@babel/parser": "^7.16.4",
-            "@vue/shared": "3.2.26",
-            "estree-walker": "^2.0.2",
-            "source-map": "^0.6.1"
-          }
-        },
-        "@vue/compiler-dom": {
-          "version": "3.2.26",
-          "dev": true,
-          "requires": {
-            "@vue/compiler-core": "3.2.26",
-            "@vue/shared": "3.2.26"
-          }
-        },
-        "@vue/shared": {
-          "version": "3.2.26",
-          "dev": true
-        }
       }
     },
     "vue": {
-      "version": "3.2.2",
+      "version": "3.2.33",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.33.tgz",
+      "integrity": "sha512-si1ExAlDUrLSIg/V7D/GgA4twJwfsfgG+t9w10z38HhL/HA07132pUQ2KuwAo8qbCyMJ9e6OqrmWrOCr+jW7ZQ==",
       "requires": {
-        "@vue/compiler-dom": "3.2.2",
-        "@vue/runtime-dom": "3.2.2",
-        "@vue/shared": "3.2.2"
+        "@vue/compiler-dom": "3.2.33",
+        "@vue/compiler-sfc": "3.2.33",
+        "@vue/runtime-dom": "3.2.33",
+        "@vue/server-renderer": "3.2.33",
+        "@vue/shared": "3.2.33"
       }
     },
     "vue-demi": {
@@ -31820,6 +31635,16 @@
         }
       }
     },
+    "vue3-video-play": {
+      "version": "1.3.1-beta.6",
+      "resolved": "https://registry.npmjs.org/vue3-video-play/-/vue3-video-play-1.3.1-beta.6.tgz",
+      "integrity": "sha512-Olrx2/LNAds7fuor/yX9ZKT9sOcwcfTt2g2YbbCrEaAmZ5Tb0hwBr5z+/CoLwELzzRzXCHPmWWoT0Wm5W/Nwpw==",
+      "requires": {
+        "hls.js": "^1.0.10",
+        "throttle-debounce": "^3.0.1",
+        "vue": "^3.2.2"
+      }
+    },
     "w3c-hr-time": {
       "version": "1.0.2",
       "dev": true,
--- a/package.json
View file @df8309f
+++ b/package.json
View file @df8309f
@@ -65,6 +65,7 @@
     "vue-json-pretty": "^2.0.4",
     "vue-router": "^4.0.11",
     "vue-types": "^4.0.3",
+    "vue3-video-play": "^1.3.1-beta.6",
     "xlsx": "^0.17.0"
   },
   "devDependencies": {
--- a/src/main.ts
View file @df8309f
+++ b/src/main.ts
View file @df8309f
@@ -13,6 +13,8 @@ import { setupStore } from '/@/store';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
+import vue3videoPlay from 'vue3-video-play'; // 引入组件
+import 'vue3-video-play/dist/style.css'; // 引入css
 if (import.meta.env.DEV) {
   import('ant-design-vue/dist/antd.less');
 }
@@ -46,6 +48,8 @@ async function bootstrap() {
   // https://next.router.vuejs.org/api/#isready
   await router.isReady();
+  app.use(vue3videoPlay);
+
   app.mount('#app', true);
 }
--- a/src/views/camera/manage/ContactDrawer.vue
View file @df8309f
+++ b/src/views/camera/manage/ContactDrawer.vue
View file @df8309f
@@ -7,7 +7,24 @@
     width="30%"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <template #iconSelect>
+        <Upload
+          name="avatar"
+          list-type="picture-card"
+          class="avatar-uploader"
+          :show-upload-list="false"
+          :customRequest="customUpload"
+          :before-upload="beforeUpload"
+        >
+          <img v-if="tenantLogo" :src="tenantLogo" alt="avatar" />
+          <div v-else>
+            <plus-outlined />
+            <div class="ant-upload-text">上传</div>
+          </div>
+        </Upload>
+      </template>
+    </BasicForm>
   </BasicDrawer>
 </template>
 <script lang="ts">
@@ -16,16 +33,19 @@
   import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
-
+  import { message, Upload } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { PlusOutlined } from '@ant-design/icons-vue';
+  import { upload } from '/@/api/oss/ossFileUploader';
+  import { FileItem } from '/@/components/Upload/src/typing';
   export default defineComponent({
     name: 'ContactDrawer',
-    components: { BasicDrawer, BasicForm },
+    components: { BasicDrawer, BasicForm, Upload, PlusOutlined },
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);
-
+      const editId = ref('');
       const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
         labelWidth: 120,
         schemas: formSchema,
@@ -40,18 +60,56 @@
           if (data.record.organizationDTO) {
             await setFieldsValue(data.record);
           } else {
+            editId.value = data.record.id;
+            tenantLogo.value = data.record?.avatar;
             Reflect.deleteProperty(data.record, 'organizationId');
             await setFieldsValue(data.record);
           }
+        } else {
+          tenantLogo.value = '';
+          editId.value = '';
         }
       });
+      const tenantLogo = ref('');
+
+      async function customUpload({ file }) {
+        if (beforeUpload(file)) {
+          const formData = new FormData();
+          formData.append('file', file);
+          const response = await upload(formData);
+          if (response.fileStaticUri) {
+            tenantLogo.value = response.fileStaticUri;
+          }
+        }
+      }
+
+      const beforeUpload = (file: FileItem) => {
+        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+        if (!isJpgOrPng) {
+          message.error('只能上传图片文件!');
+        }
+        const isLt2M = (file.size as number) / 1024 / 1024 < 2;
+        if (!isLt2M) {
+          message.error('图片大小不能超过2MB!');
+        }
+        return isJpgOrPng && isLt2M;
+      };
+
       const getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置'));
       async function handleSubmit() {
         try {
           const { createMessage } = useMessage();
           const values = await validate();
+          if (tenantLogo.value !== '') {
+            values.avatar = tenantLogo.value;
+          }
+          if (editId.value !== '') {
+            values.id = editId.value;
+          } else {
+            delete values.id;
+          }
           setDrawerProps({ confirmLoading: true });
           let saveMessage = '添加成功';
           let updateMessage = '修改成功';
@@ -69,6 +127,9 @@
         registerDrawer,
         registerForm,
         handleSubmit,
+        customUpload,
+        beforeUpload,
+        tenantLogo,
       };
     },
   });
--- a/src/views/camera/manage/DialogPreviewVideo.vue 0 → 100644
View file @df8309f
+++ b/src/views/camera/manage/DialogPreviewVideo.vue 0 → 100644
View file @df8309f
+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="55rem"
+      :height="heightNum"
+      @register="register"
+      title="视频预览"
+      @cancel="handleCancel"
+      :showOkBtn="false"
+    >
+      <div class="video-sty">
+        <div>
+          <vue3VideoPlay v-bind="options" :poster="videoPoster" />
+        </div>
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, reactive, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+
+  export default defineComponent({
+    name: 'DialogPreviewVideo',
+    components: {
+      BasicModal,
+    },
+    emits: ['success', 'register'],
+    setup() {
+      let options: any = reactive({});
+      const videoPoster = ref('');
+      const heightNum = ref(800);
+      const [register] = useModalInner(async (data) => {
+        if (data) {
+          const fileText = data.record?.videoUrl.split('.').pop();
+          videoPoster.value = data.record?.avatar;
+          options.width = '800px'; //播放器高度
+          options.height = '500px'; //播放器高度
+          options.color = ''; //主题色
+          options.type =
+            fileText === 'm3u8' ? 'm3u8' : fileText === 'mp4' ? 'video/mp4' : 'video/x-flv';
+          options.title = data.record?.name; //视频名称
+          options.src = data.record?.videoUrl; //视频源
+          options.muted = false; //静音
+          options.webFullScreen = false;
+          options.speedRate = ['0.75', '1.0', '1.25', '1.5', '2.0']; //播放倍速
+          options.autoPlay = false; //自动播放
+          options.loop = false; //循环播放
+          options.mirror = false; //镜像画面
+          options.ligthOff = false; //关灯模式
+          options.volume = 0.3; //默认音量大小
+          options.control = true; //是否显示控制
+          options.controlBtns = [
+            'audioTrack',
+            'quality',
+            'speedRate',
+            'volume',
+            'setting',
+            'pip',
+            'pageFullScreen',
+            'fullScreen',
+          ]; //显示所有按钮,
+        }
+      });
+      const handleCancel = () => {};
+      return {
+        register,
+        handleCancel,
+        options,
+        heightNum,
+        videoPoster,
+      };
+    },
+  });
+</script>
+<style>
+  .video-sty {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
--- a/src/views/camera/manage/config.data.ts
View file @df8309f
+++ b/src/views/camera/manage/config.data.ts
View file @df8309f
@@ -5,12 +5,18 @@ import { copyTransFun } from '/@/utils/fnUtils';
 // 表格列数据
 export const columns: BasicColumn[] = [
   {
-    title: '视频名字',
+    title: '封面',
+    dataIndex: 'avatar',
+    width: 80,
+    slots: { customRender: 'img' },
+  },
+  {
+    title: '名字',
     dataIndex: 'name',
     width: 120,
   },
   {
-    title: '视频厂家',
+    title: '厂家',
     dataIndex: 'brand',
     width: 120,
   },
@@ -58,6 +64,12 @@ export const searchFormSchema: FormSchema[] = [
 // 弹框配置项
 export const formSchema: FormSchema[] = [
   {
+    field: 'avatar',
+    label: '视频封面',
+    slot: 'iconSelect',
+    component: 'Input',
+  },
+  {
     field: 'name',
     label: '视频名字',
     required: true,
--- a/src/views/camera/manage/index.vue
View file @df8309f
+++ b/src/views/camera/manage/index.vue
View file @df8309f
@@ -23,6 +23,18 @@
             批量删除
           </a-button>
         </template>
+        <template #img="{ record }">
+          <TableImg
+            :size="30"
+            :showBadge="false"
+            :simpleShow="true"
+            :imgList="
+              typeof record.avatar !== 'undefined' && record.avatar !== '' && record.avatar != null
+                ? [record.avatar]
+                : null
+            "
+          />
+        </template>
         <template #action="{ record }">
           <TableAction
             :actions="[
@@ -51,12 +63,13 @@
       </BasicTable>
     </PageWrapper>
     <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
+    <VideoPreviewModal @register="registerModal" />
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, reactive, ref, computed } from 'vue';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { PageWrapper } from '/@/components/Page';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useDrawer } from '/@/components/Drawer';
@@ -64,6 +77,9 @@
   import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
   import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
   import { searchFormSchema, columns } from './config.data';
+  import VideoPreviewModal from './DialogPreviewVideo.vue';
+  import { useModal } from '/@/components/Modal';
+
   export default defineComponent({
     components: {
       PageWrapper,
@@ -71,6 +87,8 @@
       BasicTable,
       TableAction,
       ContactDrawer,
+      VideoPreviewModal,
+      TableImg,
     },
     setup() {
       let selectedRowIds = ref<string[]>([]);
@@ -81,11 +99,13 @@
       };
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      const [registerModal, { openModal }] = useModal();
       // 表格hooks
       const [registerTable, { reload }] = useTable({
         title: '视频列表',
         api: cameraPage,
         columns,
+        showIndexColumn: false,
         clickToRowSelect: false,
         formConfig: {
           labelWidth: 120,
@@ -134,13 +154,13 @@
         if (record) {
           try {
             await deleteCameraManage([record.id]);
-            createMessage.success('删除联系人成功');
+            createMessage.success('删除视频成功');
             handleSuccess();
           } catch (e) {}
         } else {
           try {
             await deleteCameraManage(selectedRowIds.value);
-            createMessage.success('批量删除联系人成功');
+            createMessage.success('批量删除视频成功');
             selectedRowIds.value = [];
             handleSuccess();
           } catch (e) {}
@@ -152,8 +172,11 @@
         searchInfo.organizationId = organizationId;
         handleSuccess();
       };
-      const handleViewVideo = (r) => {
-        console.log(r);
+      const handleViewVideo = (record) => {
+        openModal(true, {
+          isUpdate: true,
+          record,
+        });
       };
       return {
         searchInfo,
@@ -166,6 +189,7 @@
         registerDrawer,
         organizationIdTreeRef,
         handleViewVideo,
+        registerModal,
       };
     },
   });