Merge branch 'main_dev' into 'main'

Main dev

See merge request yunteng/thingskit-view!232

@@ -57,7 +57,11 @@
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
     "vue3-sketch-ruler": "^1.3.3",
-    "vuedraggable": "^4.1.0"
+    "vuedraggable": "^4.1.0",
+    "xgplayer": "^3.0.14",
+    "xgplayer-flv": "^3.0.14",
+    "xgplayer-hls": "^3.0.14",
+    "xgplayer-mp4": "^3.0.14"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.0.2",

-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -11,6 +11,9 @@ dependencies:
   '@amap/amap-jsapi-types':
     specifier: ^0.0.8
     version: 0.0.8
+  '@fingerprintjs/fingerprintjs':
+    specifier: ^3.4.1
+    version: 3.4.2
   '@types/color':
     specifier: ^3.0.3
     version: 3.0.3
@@ -41,6 +44,9 @@ dependencies:
   dom-helpers:
     specifier: ^5.2.1
     version: 5.2.1
+  echarts-gl:
+    specifier: ^2.0.9
+    version: 2.0.9(echarts@5.3.3)
   echarts-liquidfill:
     specifier: ^3.1.0
     version: 3.1.0(echarts@5.3.3)
@@ -50,6 +56,9 @@ dependencies:
   echarts-wordcloud:
     specifier: ^2.0.0
     version: 2.0.0(echarts@5.3.3)
+  flv.js:
+    specifier: ^1.6.2
+    version: 1.6.2
   gsap:
     specifier: ^3.11.3
     version: 3.11.3
@@ -89,6 +98,9 @@ dependencies:
   video.js:
     specifier: ^7.20.3
     version: 7.21.4
+  videojs-flvjs-es6:
+    specifier: ^1.0.1
+    version: 1.0.1
   vue:
     specifier: ^3.2.31
     version: 3.2.37
@@ -113,6 +125,18 @@ dependencies:
   vuedraggable:
     specifier: ^4.1.0
     version: 4.1.0(vue@3.2.37)
+  xgplayer:
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.36.1)
+  xgplayer-flv:
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.36.1)(xgplayer@3.0.14)
+  xgplayer-hls:
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.36.1)(xgplayer@3.0.14)
+  xgplayer-mp4:
+    specifier: ^3.0.14
+    version: 3.0.14(core-js@3.36.1)(xgplayer@3.0.14)
 
 devDependencies:
   '@commitlint/cli':
@@ -1158,6 +1182,12 @@ packages:
       - supports-color
     dev: true
 
+  /@fingerprintjs/fingerprintjs@3.4.2:
+    resolution: {integrity: sha512-3Ncze6JsJpB7BpYhqIgvBpfvEX1jsEKrad5hQBpyRQxtoAp6hx3+R46zqfsuQG4D9egQZ+xftQ0u4LPFMB7Wmg==}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /@humanwhocodes/config-array@0.9.5:
     resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
     engines: {node: '>=10.10.0'}
@@ -2409,6 +2439,10 @@ packages:
     engines: {node: '>=6.0'}
     dev: true
 
+  /claygl@1.3.0:
+    resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==}
+    dev: false
+
   /clean-css@5.3.2:
     resolution: {integrity: sha512-JVJbM+f3d3Q704rF4bqQ5UUyTtuJ0JRKNbTKVEeujCCBoMdkEi+V+e8oktO9qGQNSvHrFTM6JZRXrUvGR1czww==}
     engines: {node: '>= 10.0'}
@@ -2540,6 +2574,12 @@ packages:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
 
+  /concat-typed-array@1.0.2:
+    resolution: {integrity: sha512-aC878bxeWSlrY6h60cCDwBUXpKwovZrB7+C4+VHNO1CIXW2gBLxbQ757jWtOXUscLGgYI8R84N6uy9fTJPe+0g==}
+    engines: {node: '>=0.10.0'}
+    deprecated: 'WARNING: This package has been renamed to typed-array-concat.'
+    dev: false
+
   /connect-history-api-fallback@1.6.0:
     resolution: {integrity: sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==}
     engines: {node: '>=0.8'}
@@ -2605,6 +2645,11 @@ packages:
       safe-buffer: 5.1.2
     dev: true
 
+  /core-js@3.36.1:
+    resolution: {integrity: sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==}
+    requiresBuild: true
+    dev: false
+
   /cosmiconfig-typescript-loader@2.0.1(@types/node@17.0.43)(cosmiconfig@7.0.1)(typescript@4.7.3):
     resolution: {integrity: sha512-B9s6sX/omXq7I6gC6+YgLmrBFMJhPWew7ty/X5Tuwtd2zOSgWaUdXjkuVwbe3qqcdETo60+1nSVMekq//LIXVA==}
     engines: {node: '>=12', npm: '>=6'}
@@ -2646,6 +2691,10 @@ packages:
       which: 2.0.2
     dev: true
 
+  /crypto-es@1.2.7:
+    resolution: {integrity: sha512-UUqiVJ2gUuZFmbFsKmud3uuLcNP2+Opt+5ysmljycFCyhA0+T16XJmo1ev/t5kMChMqWh7IEvURNCqsg+SjZGQ==}
+    dev: false
+
   /crypto-js@4.1.1:
     resolution: {integrity: sha512-o2JlM7ydqd3Qk9CA0L4NL6mTzU2sdx96a+oOfPu8Mkl/PK51vSyoi8/rQ8NknZtk44vq15lmhAj9CIAGwgeWKw==}
     dev: false
@@ -2692,6 +2741,20 @@ packages:
     resolution: {integrity: sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==}
     dev: false
 
+  /d@1.0.2:
+    resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      es5-ext: 0.10.64
+      type: 2.7.2
+    dev: false
+
+  /danmu.js@1.1.13:
+    resolution: {integrity: sha512-knFd0/cB2HA4FFWiA7eB2suc5vCvoHdqio33FyyCSfP7C+1A+zQcTvnvwfxaZhrxsGj4qaQI2I8XiTqedRaVmg==}
+    dependencies:
+      event-emitter: 0.3.5
+    dev: false
+
   /dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -2765,6 +2828,11 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /deepmerge@2.2.1:
+    resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /deepmerge@4.2.2:
     resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
     engines: {node: '>=0.10.0'}
@@ -2807,6 +2875,10 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /delegate@3.2.0:
+    resolution: {integrity: sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==}
+    dev: false
+
   /detect-file@1.0.0:
     resolution: {integrity: sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==}
     engines: {node: '>=0.10.0'}
@@ -2900,6 +2972,20 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /downloadjs@1.4.7:
+    resolution: {integrity: sha512-LN1gO7+u9xjU5oEScGFKvXhYf7Y/empUIIEAGBs1LzUq/rg5duiDrkuH5A2lQGd5jfMOb9X9usDa2oVXwJ0U/Q==}
+    dev: false
+
+  /echarts-gl@2.0.9(echarts@5.3.3):
+    resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==}
+    peerDependencies:
+      echarts: ^5.1.2
+    dependencies:
+      claygl: 1.3.0
+      echarts: 5.3.3
+      zrender: 5.3.2
+    dev: false
+
   /echarts-liquidfill@3.1.0(echarts@5.3.3):
     resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
     peerDependencies:
@@ -3021,6 +3107,37 @@ packages:
       is-symbol: 1.0.4
     dev: true
 
+  /es5-ext@0.10.64:
+    resolution: {integrity: sha512-p2snDhiLaXe6dahss1LddxqEm+SkuDvV8dnIQG0MWjyHpcMNfXKPE+/Cc0y+PhxJX3A4xGNeFCj5oc0BUh6deg==}
+    engines: {node: '>=0.10'}
+    requiresBuild: true
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.4
+      esniff: 2.0.1
+      next-tick: 1.1.0
+    dev: false
+
+  /es6-iterator@2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      es6-symbol: 3.1.4
+    dev: false
+
+  /es6-promise@4.2.8:
+    resolution: {integrity: sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==}
+    dev: false
+
+  /es6-symbol@3.1.4:
+    resolution: {integrity: sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      d: 1.0.2
+      ext: 1.7.0
+    dev: false
+
   /esbuild@0.11.3:
     resolution: {integrity: sha512-BzVRHcCtFepjS9WcqRjqoIxLqgpK21a8J4Zi4msSGxDxiXVO1IbcqT1KjhdDDnJxKfe7bvzZrvMEX+bVO0Elcw==}
     hasBin: true
@@ -3265,6 +3382,16 @@ packages:
       - supports-color
     dev: true
 
+  /esniff@2.0.1:
+    resolution: {integrity: sha512-kTUIGKQ/mDPFoJ0oVfcmyJn4iBDRptjNVIzwIFR7tqWXdVI9xfA2RMwY/gbSpJG3lkdWNEjLap/NqVHZiJsdfg==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+      event-emitter: 0.3.5
+      type: 2.7.2
+    dev: false
+
   /espree@9.3.2:
     resolution: {integrity: sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3310,6 +3437,17 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /event-emitter@0.3.5:
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
+    dependencies:
+      d: 1.0.2
+      es5-ext: 0.10.64
+    dev: false
+
+  /eventemitter3@4.0.7:
+    resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+    dev: false
+
   /events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -3341,6 +3479,12 @@ packages:
       homedir-polyfill: 1.0.3
     dev: true
 
+  /ext@1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+    dependencies:
+      type: 2.7.2
+    dev: false
+
   /extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
     dev: true
@@ -3490,6 +3634,13 @@ packages:
     resolution: {integrity: sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==}
     dev: true
 
+  /flv.js@1.6.2:
+    resolution: {integrity: sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==}
+    dependencies:
+      es6-promise: 4.2.8
+      webworkify-webpack: 2.1.5
+    dev: false
+
   /follow-redirects@1.15.1:
     resolution: {integrity: sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==}
     engines: {node: '>=4.0'}
@@ -4590,6 +4741,10 @@ packages:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
     dev: true
 
+  /next-tick@1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+    dev: false
+
   /no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
     dependencies:
@@ -5732,6 +5887,10 @@ packages:
     resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
     dev: true
 
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+    dev: false
+
   /tsutils@3.21.0(typescript@4.6.3):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -5774,6 +5933,10 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /type@2.7.2:
+    resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
+    dev: false
+
   /typescript@4.6.3:
     resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==}
     engines: {node: '>=4.2.0'}
@@ -5912,6 +6075,10 @@ packages:
       videojs-vtt.js: 0.15.4
     dev: false
 
+  /videojs-flvjs-es6@1.0.1:
+    resolution: {integrity: sha512-wAI5ff2tZVW+uftTLyPmS38F4SHmMlxqBFOgXEBqMs2X0N4uIVQK0iCCv5XACXH+oc+mP70D23mJmT8KsoHx0g==}
+    dev: false
+
   /videojs-font@3.2.0:
     resolution: {integrity: sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==}
     dev: false
@@ -6261,6 +6428,10 @@ packages:
       - uglify-js
     dev: true
 
+  /webworkify-webpack@2.1.5:
+    resolution: {integrity: sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw==}
+    dev: false
+
   /which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
@@ -6308,6 +6479,101 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
+  /xgplayer-flv@3.0.14(core-js@3.36.1)(xgplayer@3.0.14):
+    resolution: {integrity: sha512-9mSBUbbzkJhFjQOaU8SvnEzDj4Y9tkHsW0IaIxCDi/DlDcHzSubdiuuTVNf1A5cgUSTnFHxwDJtzqVm6FhmTeg==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+      xgplayer: '>=3.0.1'
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+      xgplayer: 3.0.14(core-js@3.36.1)
+      xgplayer-streaming-shared: 3.0.14(core-js@3.36.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.36.1)
+    dev: false
+
+  /xgplayer-hls@3.0.14(core-js@3.36.1)(xgplayer@3.0.14):
+    resolution: {integrity: sha512-UiVDiDcIzQ6kiDZitbyXqRx5nX/Pi69S9Vfh5lc+6R8SsA2ZyvxWtGOQ6XfpZyXYHfl56JMbyNObOgMT1iRNLw==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+      xgplayer: 3.0.14
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+      xgplayer: 3.0.14(core-js@3.36.1)
+      xgplayer-streaming-shared: 3.0.14(core-js@3.36.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.36.1)
+    dev: false
+
+  /xgplayer-mp4-loader@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-cCPH7I/i+saP5i+vivfnu7Bekxm1sS3JlTzaqX2crUL9a4MfWi/r7Yumqsn52lyQGyb+lGKOsvbHeR3wTwUx1w==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+      xgplayer-streaming-shared: 3.0.14(core-js@3.36.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.36.1)
+    dev: false
+
+  /xgplayer-mp4@3.0.14(core-js@3.36.1)(xgplayer@3.0.14):
+    resolution: {integrity: sha512-EEZ3KtG7JbOBL33P+Uv98PaIft9tI9zw2rfyS7Sip57hT/9tJ2az4qz9qNSRcrrlLTo0DTYGR/JzADu7l/IyUQ==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+      xgplayer: '>=3.0.0'
+    dependencies:
+      concat-typed-array: 1.0.2
+      core-js: 3.36.1
+      deepmerge: 2.2.1
+      eventemitter3: 4.0.7
+      xgplayer: 3.0.14(core-js@3.36.1)
+      xgplayer-mp4-loader: 3.0.14(core-js@3.36.1)
+      xgplayer-streaming-shared: 3.0.14(core-js@3.36.1)
+      xgplayer-transmuxer: 3.0.14(core-js@3.36.1)
+    dev: false
+
+  /xgplayer-streaming-shared@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-XBXNjnMfFDl15kQfXNgmAkaDqRdN0PhxVFBm7+TezillpTdLmqj+HD90F6BargdZVJ4I20/YHYdb9qBg+hUDhg==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+    dev: false
+
+  /xgplayer-subtitles@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-w6H1h+g3kOI477kv2QBRMZe3M/1dHLXttHBwq4LwKTPGVQ19fLIDGwkfn+HeKwe1ocGDaaq96bS+l+BadnP9TA==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.36.1
+      eventemitter3: 4.0.7
+    dev: false
+
+  /xgplayer-transmuxer@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-lMS2EwuA6tToCC4NuyJ5Ax0UDaaWU/YuaSkI/Bsj+vHkEzO42vgi2EerSPr91Moz05KhG/+4Vt8qMKUVFjhGTw==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      '@babel/runtime': 7.20.6
+      concat-typed-array: 1.0.2
+      core-js: 3.36.1
+      crypto-es: 1.2.7
+    dev: false
+
+  /xgplayer@3.0.14(core-js@3.36.1):
+    resolution: {integrity: sha512-TPS77hUIcM1zVx6FSpGG+OzfMwjwxxWihd+YxVx82DQ22QK60v8TXWSZlWISbmS1+fAlFneesvXDjwy60tC37w==}
+    peerDependencies:
+      core-js: '>=3.12.1'
+    dependencies:
+      core-js: 3.36.1
+      danmu.js: 1.1.13
+      delegate: 3.2.0
+      downloadjs: 1.4.7
+      eventemitter3: 4.0.7
+      xgplayer-subtitles: 3.0.14(core-js@3.36.1)
+    dev: false
+
   /y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}

 import { defHttp } from '@/utils/external/http/axios'
-import { ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse } from './model'
+import {CameraRecord, ConfigurationItemType, DictItem, OrganizationListItem, UploadResponse} from './model'
 import { PaginationResult } from '/#/external/axios'
 import { isShareMode } from '@/views/share/hook'
 
@@ -88,7 +88,7 @@ export const getOrganizationList = (params?: OrganizationListItem) =>
 
 //获取视频列表
 export const getVideoList = (params?: object) =>
-  defHttp.get({
+  defHttp.get<{data: CameraRecord[]}>({
     url: Api.VIDEO,
     params
   })

@@ -54,3 +54,39 @@ export interface ProductAndDevice {
   deviceType: string
   transportType: string
 }
+
+
+export interface CameraRecord {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  enabled: boolean;
+  tenantId: string;
+  videoUrl: string;
+  brand: string;
+  sn: string;
+  organizationId: string;
+  organizationName: string;
+  status: boolean;
+  accessMode: number;
+  playProtocol: number;
+  deviceId?: string;
+  channelId?: string;
+  params?: {
+    channelNo: string;
+    deviceId: string;
+  };
+  videoPlatformDTO?: VideoPlatformDTO;
+}
+
+interface VideoPlatformDTO {
+  enabled: boolean;
+  type: number;
+  host: string;
+  appKey: string;
+  appSecret: string;
+  ssl: number;
+}

+export {default as XGPlayer} from './src/index.vue'

+<script setup lang="ts">
+import Player, {Events, IError} from 'xgplayer';
+import {FlvPlugin} from 'xgplayer-flv';
+import Mp4Plugin from 'xgplayer-mp4';
+import {HlsPlugin} from 'xgplayer-hls';
+import {onMounted, shallowRef, computed, unref, toRaw, onUnmounted, ref, watch} from 'vue';
+import PresetPlayer from 'xgplayer';
+import {IPlayerOptions} from 'xgplayer/es/player';
+import 'xgplayer/dist/index.min.css';
+import {StreamType, XGPlayerProps} from './types';
+import {isShareMode} from "@/views/share/hook";
+import {getJwtToken, getShareJwtToken} from "@/utils/external/auth";
+
+const props = withDefaults(defineProps<{
+  streamType?: StreamType;
+  autoPlay?: boolean;
+  url?: string;
+  withToken?: boolean;
+  config?: Omit<IPlayerOptions, 'url'>;
+}>(), {
+  streamType: 'auto',
+  autoPlay: true,
+  config: () => ({}),
+});
+
+const emits = defineEmits<{
+  (eventName: 'ready', player: PresetPlayer): void;
+  (eventName: 'onUnmounted', player: PresetPlayer): void;
+}>();
+
+function getStreamTypeByUrl(url = ''): StreamType | undefined {
+  if (url.endsWith('.m3u8')) return 'hls';
+  else if (url.endsWith('.mp4')) return 'mp4';
+  else if (url.endsWith('.flv')) {
+    return 'flv';
+  } else return;
+}
+
+const getPluginByStreamType = (): IPlayerOptions => {
+  let {url, withToken} = props;
+  let {streamType} = props;
+  streamType = streamType === 'auto' ? getStreamTypeByUrl(url)! : streamType;
+
+  const liveConfig = {
+    targetLatency: 10,
+    maxLatency: 20,
+    disconnectTime: 0,
+    fetchOptions: withToken
+        ? {
+          headers: {
+            'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+          },
+        }
+        : {},
+  };
+  const config: IPlayerOptions = {
+    flv: liveConfig,
+    hls: liveConfig,
+  };
+  switch (streamType) {
+    case 'hls':
+      config.plugins = [HlsPlugin];
+      break;
+    case 'mp4':
+      config.plugins = [Mp4Plugin];
+      break;
+    case 'flv':
+      config.plugins = [FlvPlugin];
+      break;
+  }
+  return config;
+};
+
+const videoElRef = shallowRef<Nullable<HTMLDivElement>>();
+
+const playerRef = shallowRef<Nullable<PresetPlayer>>();
+
+const propsRef = ref<XGPlayerProps>({});
+
+const getPlayerConfig = computed<IPlayerOptions>(() => {
+  const {url, autoPlay, config} = props;
+
+  const basicConfig: IPlayerOptions = {
+    ...config,
+    ...propsRef,
+    url,
+    lang: 'zh',
+    isLive: true,
+    autoplay: autoPlay,
+    autoplayMuted: autoPlay,
+    ...getPluginByStreamType(),
+  };
+  return basicConfig;
+});
+
+function onDecodeError() {
+  console.warn('player happend decode error');
+  playerRef.value?.switchURL(props.url!);
+}
+
+function initializePlayer() {
+  if (unref(playerRef)) {
+    playerRef.value?.destroy?.();
+    playerRef.value = null;
+  }
+
+  const config = toRaw(unref(getPlayerConfig));
+
+  if (!unref(videoElRef)) return;
+
+  const player = (playerRef.value = new Player(Object.assign(config, {el: unref(videoElRef)})));
+
+  player.on(Events.READY, () => {
+    emits('ready', player);
+  });
+
+  player.setEventsMiddleware({
+    error: (event, callback) => {
+      const code = (
+          event as unknown as {
+            error: MediaError;
+          }
+      ).error.code;
+      if (code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED) {
+        if (!props.url) {
+          return;
+        }
+        callback();
+        return;
+      }
+
+      if (code === MediaError.MEDIA_ERR_DECODE) {
+        // 视频流可以播放 中途解码失败重载
+        if (playerRef.value?.isPlaying) {
+          onDecodeError();
+        }
+        return;
+      }
+
+      callback();
+    },
+  });
+}
+
+onMounted(() => {
+  initializePlayer();
+});
+
+onUnmounted(() => {
+  emits('onUnmounted', unref(playerRef)!);
+  playerRef.value?.destroy?.();
+});
+
+watch(
+    () => props.url,
+    () => {
+      initializePlayer();
+    }
+);
+
+defineExpose({
+  getPlayerInstance: () => unref(playerRef),
+});
+</script>
+
+<template>
+  <div ref="videoElRef"></div>
+</template>

+import { IPlayerOptions } from 'xgplayer/es/player';
+
+export type StreamType = 'flv' | 'mp4' | 'hls' | 'auto';
+export interface XGPlayerProps {
+  streamType?: StreamType;
+  autoPlay?: boolean;
+  url?: string;
+  withToken?: boolean;
+  config?: Omit<IPlayerOptions, 'url'>;
+}

-import { ref, toRefs, toRaw, watch } from 'vue'
+import {ref, toRefs, toRaw, watch} from 'vue'
 import type VChart from 'vue-echarts'
-import { useChartDataPondFetch } from '@/hooks/'
-import { CreateComponentType, ChartFrameEnum, CreateComponentGroupType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview, intervalUnitHandle } from '@/utils'
-import { setOption } from '@/packages/public/chart'
-import { useChartDataSocket } from './useChartDataSocket'
-import { customRequest } from '@/api/external/customRequest'
-import { useFilterFn } from './useFilterFn'
-import { RequestContentTypeEnum } from '@/enums/external/httpEnum'
+import {useChartDataPondFetch} from '@/hooks/'
+import {CreateComponentType, ChartFrameEnum, CreateComponentGroupType} from '@/packages/index.d'
+import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
+import {isPreview, intervalUnitHandle} from '@/utils'
+import {setOption} from '@/packages/public/chart'
+import {useChartDataSocket} from './useChartDataSocket'
+import {customRequest} from '@/api/external/customRequest'
+import {useFilterFn} from './useFilterFn'
+import {RequestContentTypeEnum} from '@/enums/external/httpEnum'
+import dayjs from 'dayjs'
+
 
 // 获取类型
 type ChartEditStoreType = typeof useChartEditStore
@@ -20,111 +22,125 @@ type ChartEditStoreType = typeof useChartEditStore
  * @param updateCallback 自定义更新函数
  */
 export const useChartDataFetch = (
-  targetComponent: CreateComponentType,
-  useChartEditStore: ChartEditStoreType,
-  updateCallback?: (...args: any) => any
+    targetComponent: CreateComponentType,
+    useChartEditStore: ChartEditStoreType,
+    updateCallback?: (...args: any) => any
 ) => {
-  const vChartRef = ref<typeof VChart | null>(null)
-  let fetchInterval: any = 0
+    const vChartRef = ref<typeof VChart | null>(null)
+    let fetchInterval: any = 0
 
-  // 组件类型
-  const { chartFrame } = targetComponent.chartConfig
+    // 组件类型
+    const {chartFrame} = targetComponent.chartConfig
 
-  // eCharts 组件配合 vChart 库更新方式
-  const echartsUpdateHandle = (dataset: any) => {
-    if (chartFrame === ChartFrameEnum.ECHARTS) {
-      if (vChartRef.value) {
-        setOption(vChartRef.value, { dataset: dataset })
-      }
+    // eCharts 组件配合 vChart 库更新方式
+    const echartsUpdateHandle = (dataset: any) => {
+        if (chartFrame === ChartFrameEnum.ECHARTS) {
+            if (vChartRef.value) {
+                setOption(vChartRef.value, {dataset: dataset})
+            }
+        }
     }
-  }
 
-  const requestIntervalFn = () => {
-    const chartEditStore = useChartEditStore()
-    if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return
+    const requestIntervalFn = () => {
+        const chartEditStore = useChartEditStore()
+        if ((targetComponent.request.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET) return
 
-    // 全局数据
-    const {
-      requestOriginUrl,
-      requestIntervalUnit: globalUnit,
-      requestInterval: globalRequestInterval
-    } = toRefs(chartEditStore.getRequestGlobalConfig)
+        // 全局数据
+        const {
+            requestOriginUrl,
+            requestIntervalUnit: globalUnit,
+            requestInterval: globalRequestInterval
+        } = toRefs(chartEditStore.getRequestGlobalConfig)
 
-    // 目标组件
-    const {
-      requestUrl,
-      requestIntervalUnit: targetUnit,
-      requestInterval: targetInterval
-    } = toRefs(targetComponent.request)
+        // 目标组件
+        const {
+            requestUrl,
+            requestIntervalUnit: targetUnit,
+            requestInterval: targetInterval
+        } = toRefs(targetComponent.request)
 
-    try {
-      // 处理地址 
-      if (requestUrl?.value) {
-        // requestOriginUrl 允许为空
-        const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
-        if (!completePath) return
+        try {
+            // 处理地址
+            if (requestUrl?.value) {
+                // requestOriginUrl 允许为空
+                const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
+                if (!completePath) return
 
-        clearInterval(fetchInterval)
+                clearInterval(fetchInterval)
 
-        const fetchFn = async () => {
-          const res = await customRequest(toRaw(targetComponent.request))
-          if (res) {
-            try {
-              const filter = targetComponent.filter
-              const { value } = useFilterFn(filter, res)
-              echartsUpdateHandle(value)
-              // 更新回调函数
-              if (updateCallback) {
-                updateCallback(value, targetComponent.request)//为了处理设备最新数据轮播列表，这里传过去当前组件的信息
-              }
-            } catch (error) {
-              console.error(error)
-            }
-          }
-        }
+                const fetchFn = async () => {
+                    let startTsValue = null
+                    let endTsValue = null
+                    const {requestParams} = toRaw(targetComponent.request)
+                    const {Params} = requestParams
+                    const {entityType, startTs, endTs} = Params
+                    let days = Math.ceil(((endTs as unknown as number) - (startTs as unknown as number)) / (1 * 60 * 60 * 24 * 1000))
+                    if (entityType === 'DEVICE') {
+                        days = days <= 2 ? 1 : days<= 8 ? 7 : 30
+                        startTsValue =  dayjs().subtract(days - 1, 'day').startOf('day').valueOf()
+                        startTsValue = dayjs(startTsValue).startOf('day').valueOf()
+                        endTsValue = dayjs().endOf('day').valueOf()
+                        ;(toRaw(targetComponent.request).requestParams.Params.startTs as unknown as number) = startTsValue as number
+                        ;(toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTsValue
+                    }
+                    const res = await customRequest(toRaw(targetComponent.request))
+                    if (res) {
+                        try {
+                            const filter = targetComponent.filter
+                            const {value} = useFilterFn(filter, res)
+                            echartsUpdateHandle(value)
+                            // 更新回调函数
+                            if (updateCallback) {
+                                updateCallback(value, targetComponent.request)//为了处理设备最新数据轮播列表，这里传过去当前组件的信息
+                            }
+                        } catch (error) {
+                            console.error(error)
+                        }
+                    }
+                }
 
-        // 普通初始化与组件交互处理监听
-        watch(
-          () => targetComponent.request,
-          () => {
-            fetchFn()
-          },
-          {
-            immediate: true,
-            deep: true
-          }
-        )
+                // 普通初始化与组件交互处理监听
+                watch(
+                    () => targetComponent.request,
+                    () => {
+                        fetchFn()
+                    },
+                    {
+                        immediate: true,
+                        deep: true
+                    }
+                )
 
-        // 定时时间
-        const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
-        // 单位
-        const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
-        // 开启轮询
-        if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
-      }
-      // eslint-disable-next-line no-empty
-    } catch (error) {
-      console.log(error)
+                // 定时时间
+                const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
+                // 单位
+                const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
+                // 开启轮询
+                if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
+            }
+            // eslint-disable-next-line no-empty
+        } catch (error) {
+            console.log(error)
+        }
     }
-  } 
 
-  if (isPreview()) { 
-    requestIntervalFn()
-    const chartEditStore = useChartEditStore()
-    const { initial } = useChartDataSocket()
-    /**
-     * 支持分组也可以接受ws
-     * 如果是分组并且绑定了ws
-     */
-    chartEditStore.getComponentList?.forEach((item:CreateComponentType | CreateComponentGroupType)=>{
-      if(item.isGroup){
-        if(item.request.requestUrl?.includes('ws')){
-          initial(item, useChartEditStore, updateCallback)
-        }
-      }
-    })
-    //
-    initial(targetComponent, useChartEditStore, updateCallback)
-  }
-  return { vChartRef }
+    if (isPreview()) {
+        requestIntervalFn()
+        const chartEditStore = useChartEditStore()
+        const {initial} = useChartDataSocket()
+        /**
+         * 支持分组也可以接受ws
+         * 如果是分组并且绑定了ws
+         */
+        chartEditStore.getComponentList?.forEach((item: CreateComponentType | CreateComponentGroupType) => {
+            if (item.isGroup) {
+                if (item.request.requestUrl?.includes('ws')) {
+                    initial(item, useChartEditStore, updateCallback)
+                }
+            }
+        })
+        //
+        initial(targetComponent, useChartEditStore, updateCallback)
+    }
+    return {vChartRef}
 }

@@ -45,11 +45,12 @@ export const lineSeriesItem = {
 
 export const option = {
   tooltip: {
-    show: true,
     trigger: 'axis',
     axisPointer: {
-      show: true,
-      type: 'shadow'
+      type: 'cross',
+      crossStyle: {
+        color: '#999'
+      }
     }
   },
   legend: {

@@ -62,17 +62,30 @@ const option = computed(() => {
 // dataset 无法变更条数的补丁
 watch(
   () => props.chartConfig.option.dataset,
-  (newData: { dimensions: any }, oldData) => {
+  (newData: any, oldData) => {
     try {
       if (!isObject(newData) || !('dimensions' in newData)) return
-      if (Array.isArray(newData?.dimensions)) {
-        const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(cloneDeep(barSeriesItem),cloneDeep(lineSeriesItem))
+      if (Array.isArray((newData as any)?.dimensions)) {
+        const seriesArr: typeof barSeriesItem[] = []
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions =
+          Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
+        const newDimensions = (newData as any).dimensions.length >= 1 ? (newData as any).dimensions.length : 1
+        const dimensionsGap = newDimensions - oldDimensions
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
+            props.chartConfig.option.series = []
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(barSeriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
         }
-        useEchartsMapLegend(props.chartConfig, seriesArr)
+        useEchartsMapLegend(props.chartConfig, props.chartConfig.option.series)
         replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
         nextTick(() => {
           replaceMergeArr.value = []
         })

@@ -240,6 +240,7 @@ const defaultTypeUpdate = (v: string) => {
 }
 
 const shortCutSelect = (value: number) => {
+  console.log(value)
   startTs.value = Date.now() - value
   endTs.value = Date.now()
   props.optionData.dataset = [startTs.value, endTs.value] as any

-<template>
-  <n-spin size="medium" :show="showLoading"
-    :style="{background: '#000',width: baseSize?.w + 'px', height: baseSize?.h + 'px' }">
-    <template #description> 视频正在努力加载中...... </template>
-    <div>
-      <div ref="playerContainerElRef" class="go-content-box"
-        :style="{ width: baseSize?.w + 'px', height: baseSize?.h + 'px', background: '#000' }">
-
-      </div>
-    </div>
-  </n-spin>
-</template>
-<script setup lang="ts" name="VideoPlay">
-import { onMounted, ref, onUnmounted, watch, unref, PropType,  shallowRef } from 'vue'
-import videojs from 'video.js'
-import 'videojs-flvjs-es6'
-import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.min.css'
-import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
-import { isShareMode } from '@/views/share/hook'
-import { getOpenFlvPlayUrl, closeFlvPlay, getVideoControlStart } from '@/api/external/flvPlay'
-import { useFingerprint } from '@/utils/external/useFingerprint'
-import { GetResult } from '@fingerprintjs/fingerprintjs'
-import { AccessModeEnum, VideoPlayerType } from '../config'
-import { getVideoUrl } from '@/api/external/common'
-
-const props = defineProps({
-  sourceSrc: {
-    type: String
-  },
-  option: {
-    type: Object
-  },
-
-  baseSize: {
-    type: Object as PropType<{ w: number; h: number }>
-  },
-  autoPlay: {
-    type: Boolean
-  },
-  name: {
-    type: String
-  },
-  avatar: {
-    type: String
-  },
-  w: {
-    type: Number,
-    default: 300
-  },
-  h: {
-    type: Number,
-    default: 300
-  },
-  index: {
-    type: Number
-  }
-})
-
-
-const { getResult } = useFingerprint()
-
-const showLoading = ref<boolean>(false)
-
-const sourceSrc = ref<string | null>(props.sourceSrc || '')
-
-
-// video实例对象
-const videoPlayer = shallowRef<videojs.Player | null>(null)
-const playerContainerElRef = shallowRef<HTMLElement | null>(null)
-
-const fingerprintResult = ref<Nullable<GetResult>>(null)
-
-const isRtspProtocol = (url: string) => {
-  const reg = /^rtsp:\/\//g
-  return reg.test(url)
-}
-
-const getVideoTypeByUrl = (url = '') => {
-  if (!url) return;
-  try {
-    const { protocol, pathname } = new URL(url)
-    if (protocol.startsWith('rtsp:')) return VideoPlayerType.flv
-    const reg = /[^.]\w*$/
-    const mathValue = pathname.match(reg) || []
-    const ext = (mathValue[0] as keyof typeof VideoPlayerType) || 'webm'
-    const type = VideoPlayerType[ext]
-    return type ? type : VideoPlayerType.webm
-  } catch (error) {
-    console.error(error)
-    return VideoPlayerType.webm
-  }
-}
-
-
-//options配置
-const options: VideoJsPlayerOptions & Recordable = {
-  language: 'zh-CN', // 设置语言
-  controls: true, // 是否显示控制条
-  preload: 'auto', // 预加载
-  autoplay: props.autoPlay ? true : false, // 是否自动播放
-  fluid: false, // 自适应宽高
-  poster: props?.avatar || '',
-  sources: [],
-  muted: props.autoPlay ? true : false,
-  userActions: {
-    hotkeys: true
-  },
-  techOrder: ['html5', 'flvjs'],
-  flvjs: {
-    mediaDataSource: {
-      isLive: true,
-      cors: true,
-      withCredentials: false,
-      hasAudio: false
-    },
-    config: {
-      autoCleanupSourceBuffer: true
-    }
-  }
-}
-
-
-async function getSource() {
-  fingerprintResult.value = await getResult()
-  let src = unref(sourceSrc) || ''
-  if (isRtspProtocol(unref(sourceSrc)!)) {
-    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
-  }
-  return [
-    {
-      type: getVideoTypeByUrl(src),
-      src
-    }
-  ]
-}
-
-//针对萤石云或者海康威视，根据视频id获取播放流地址
-const getVideoUrlById = async (id: string) => {
-  const res = await getVideoUrl(id)
-  if (!res) return
-  const { url } = res.data
-  return url
-}
-
-//针对gbt28181，根据设备id和通道号获取播放流地址
-const getVideoControlList = async (deviceId: string, channelId: string) => {
-  const {
-    data: { flv }
-  } = await getVideoControlStart({
-    deviceId,
-    channelId
-  })
-  return flv
-}
-
-//针对自定义地址，直接获取地址
-const getCustomUrl = (url: string) => {
-  return url
-}
-
-
-function createVideoElement() {
-  if (!unref(playerContainerElRef)) return
-  unref(playerContainerElRef)!.innerHTML = ''
-  const video = document.createElement('video')
-  video.setAttribute('crossOrigin', 'anonymous')
-  video.style.setProperty('width', '100%')
-  video.style.setProperty('height', '100%')
-  video.classList.add('video-js', 'my-video', 'vjs-theme-city', 'vjs-big-play-centered')
-  unref(playerContainerElRef)?.appendChild(video)
-  return video
-}
-
-
-// 初始化videojs
-const createVideoPlayer = async () => {
-  if (unref(videoPlayer)) dispose()
-
-  options.sources = await getSource()
-
-  if (isRtspProtocol(unref(sourceSrc) || '')) {
-    options.flvjs = {
-      ...(options.flvjs || {}),
-      config: {
-        headers: {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
-        }
-      }
-    }
-  }
-  const video = createVideoElement()
-  if (!video) return
-
-  videoPlayer.value = videojs(video!, options) //fix 修复videojs解决直播延时的问题
-
-  videoPlayer.value?.on('timeupdate', function () {
-    // 计算表最新推流的时间和现在播放器播放推流的时间
-    let differTime =
-      (unref(videoPlayer))!.buffered()?.end(0) -
-      (unref(videoPlayer))!.currentTime() // 差值小于1.5s时根据1倍速进行播放
-    if (differTime < 1.5) {
-      videoPlayer.value?.playbackRate(1)
-    } // 差值大于1.5s小于10s根据1.2倍速进行播放
-    if (differTime < 10 && differTime > 1.5) {
-      videoPlayer.value?.playbackRate(1.2)
-    } // 差值大于10s时进行重新加载直播流
-    if (differTime > 10) {
-      createVideoPlayer()
-    }
-  })
-}
-
-const getVideosUrl = async () => {
-  try {
-    showLoading.value = true
-    videoPlayer.value?.src('');
-    const { option } = props || {}
-    const { accessMode, id, channelId, deviceId, customUrl } = option || {}
-    if (accessMode === AccessModeEnum.Streaming) {
-      return await getVideoUrlById(id)
-    } else if (accessMode === AccessModeEnum.GBT28181) {
-      return await getVideoControlList(deviceId, channelId)
-    } else {
-      return await getCustomUrl(customUrl)
-    }
-  } finally {
-    showLoading.value = false
-  }
-}
-
-
-watch(() => props.option, async () => {
-  console.log(props, 'prop')
-  dispose()
-  sourceSrc.value = await getVideosUrl()
-  createVideoPlayer()
-})
-
-
-
-// 销毁
-function dispose() {
-  unref(videoPlayer)?.dispose()
-  videoPlayer.value = null
-}
-
-watch(
-  () => props.autoPlay,
-  async (newData: boolean) => {
-    if (newData) {
-      handleVideoPlay()
-    } else {
-      videoPlayer.value?.pause()
-    }
-  }
-)
-
-onMounted(async () => {
-  dispose()
-  sourceSrc.value = await getVideosUrl()
-  createVideoPlayer()
-})
-
-onUnmounted(() => {
-  if (props.sourceSrc) {
-    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
-  }
-  handleVideoDispose()
-})
-
-//播放
-const handleVideoPlay = () => videoPlayer.value?.play()
-
-//暂停和销毁
-const handleVideoDispose = () => videoPlayer.value?.dispose() && videoPlayer.value?.pause()
-
-</script>
-
-<style lang="scss" scoped>
-
-.go-content-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .my-video {
-    width: 100% !important;
-    height: 100% !important;
-    position: relative;
-  }
-}
-</style>
-<style>
-.vjs-poster {
-  background-size: 100% !important;
-}
-</style>

+<script lang="ts" setup>
+import {XGPlayer} from '@/components/Video'
+import {watch, ref} from "vue";
+import {StreamType} from "@/components/Video/src/types";
+import {getPlayUrl} from "@/packages/components/external/Informations/Mores/SingleCamera/config";
+import {CameraRecord} from "@/api/external/common/model";
+
+
+
+const props = defineProps<{
+  dataset?: any
+  width: number
+  height: number
+}>()
+
+const loading = ref(false)
+const playUrl = ref<string>()
+const playType = ref<StreamType>()
+
+interface Dataset {
+  accessMode: number
+  autoPlay: boolean
+  channelId?: string
+  customUrl?: string
+  deviceId?: string
+  id?: string
+  playProtocol?: number
+}
+
+const handleGetPlayUrl = async (dataset: Dataset) => {
+  try {
+    loading.value = true
+    const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = dataset
+    if (!accessMode) return
+    const {type, url} = await getPlayUrl({
+      id: id,
+      accessMode: accessMode,
+      playProtocol: playProtocol,
+      videoUrl: customUrl,
+      params: {
+        deviceId: deviceId,
+        channelNo: channelId,
+      },
+    } as unknown as CameraRecord) || {}
+    playUrl.value = url
+    playType.value = type
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(
+    () => props.dataset,
+    (newData: Dataset) => {
+      handleGetPlayUrl(newData)
+    },
+    {
+      immediate: true
+    }
+)
+</script>
+
+<template>
+  <NSpin :show="loading" class="player-spin">
+    <XGPlayer
+        :url="playUrl"
+        :stream-type="playType"
+        :auto-play="dataset.autoPlay"
+        :config="{width: width, height: height, poster: dataset.avatar}"
+    />
+  </NSpin>
+</template>
+
+<style lang="scss" scoped>
+.player-spin {
+  width: 100%;
+  height: 100%;
+  @include deep() {
+    .n-spin-content {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+</style>

-import VideoPlay from './VideoPlay.vue'
-
-export { VideoPlay as default }

@@ -53,6 +53,7 @@ export interface videoList {
   deviceId: string
   customUrl: string
   params: GBT28181Params
+  playProtocol?: number
 }
 
 export const option = {

@@ -120,15 +120,16 @@ const handleUpdateTreeValue = (e: string) => {
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
   if (!res) return
-  videoOptions.value = res?.data?.map((item: videoList) => ({
+  videoOptions.value = res?.data?.map((item) => ({
     label: item.name,
     value: item.id,
     id: item.id,
     accessMode: item.accessMode,
     customUrl: item.accessMode === AccessModeEnum.ManuallyEnter ? item.videoUrl: '', //参数只给自定义视频流使用
     channelId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.channelNo : '', //参数只给gbt28181使用
-    deviceId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.deviceId : '' //参数只给gbt28181使用
-  }))
+    deviceId: item.accessMode === AccessModeEnum.GBT28181 ? item?.params?.deviceId : '', //参数只给gbt28181使用
+    playProtocol: item?.playProtocol
+  } as any))
 }
 
 //针对萤石云或者海康威视，根据视频id获取播放流地址

@@ -2,17 +2,7 @@
   <div @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" class="banner-box" ref="root">
     <div class="wrapper">
       <div v-for="(item, index) in option.dataset" :key="index" :class="item.className" :style="item.sty">
-        <VideoPlay
-          :autoPlay="item.autoPlay"
-          :option="item"
-          :name="item.name"
-          :avatar="item.avatar"
-          :key="item + index"
-          :sourceSrc="item.url"
-          :baseSize="{w,h}"
-          :index="index"
-        />
-        <span class="video-title">{{ item.name }}</span>
+        <VideoPlayer :key="item + index" :dataset="item" :width="w" :height="h"/>
       </div>
     </div>
     <a v-show="isShowSvg" href="javascript:;" class="left" @click="changeSlide('left')"></a>
@@ -20,11 +10,10 @@
   </div>
 </template>
 <script setup lang="ts" name="index">
-import { PropType, watch, toRefs, shallowReactive, onMounted, ref } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import 'video.js/dist/video-js.min.css'
-import { option as typeOption } from './config'
-import VideoPlay from './components'
+import {PropType, watch, toRefs, shallowReactive, onMounted, ref} from 'vue'
+import {CreateComponentType} from '@/packages/index.d'
+import {option as typeOption} from './config'
+import VideoPlayer from "@/packages/components/external/Informations/Mores/Camera/components/VideoPlayer.vue";
 
 const props = defineProps({
   chartConfig: {
@@ -35,9 +24,9 @@ const props = defineProps({
 
 const isShowSvg = ref(false)
 
-const { w, h } = toRefs(props.chartConfig.attr)
+const {w, h} = toRefs(props.chartConfig.attr)
 
-const { autoSwitch, interval } = toRefs(props.chartConfig.option)
+const {autoSwitch, interval} = toRefs(props.chartConfig.option)
 
 //暂定 any类型
 const option = shallowReactive<{ ['dataset']: any }>({
@@ -50,15 +39,15 @@ const computedFunc = (initial: number, source: Recordable[]) => {
   if (initial < 0) initial = 0
   if (Array.isArray(source)) {
     let len = source.length,
-      temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
-      temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
-      temp3 = initial,
-      temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
-      temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
+        temp1 = initial - 2 < 0 ? initial - 2 + len : initial - 2,
+        temp2 = initial - 1 < 0 ? initial - 1 + len : initial - 1,
+        temp3 = initial,
+        temp4 = initial + 1 >= len ? initial + 1 - len : initial + 1,
+        temp5 = initial + 2 >= len ? initial + 2 - len : initial + 2
     return source?.map((item: Recordable, index: number) => {
       let transform = `translateX(-50%) scale(0.7)`,
-        zIndex = 0,
-        className = 'slide'
+          zIndex = 0,
+          className = 'slide'
       switch (index) {
         case temp3:
           transform = `translateX(-50%) scale(1)`
@@ -93,23 +82,23 @@ const computedFunc = (initial: number, source: Recordable[]) => {
 }
 
 watch(
-  () => props.chartConfig.option.dataset,
-  newData => {
-    option.dataset = newData
-  },
-  {
-    immediate: true,
-    deep: true
-  }
+    () => props.chartConfig.option.dataset,
+    newData => {
+      option.dataset = newData
+    },
+    {
+      immediate: true,
+      deep: true
+    }
 )
 
 option.dataset = computedFunc(initial.value, option.dataset)
 
 watch(
-  () => initial.value,
-  newV => {
-    option.dataset = computedFunc(newV, option.dataset)
-  }
+    () => initial.value,
+    newV => {
+      option.dataset = computedFunc(newV, option.dataset)
+    }
 )
 
 // 处理自动轮播
@@ -155,17 +144,17 @@ function changeSlide(dir: string) {
 }
 
 watch(
-  () => autoSwitch.value,
-  (newV: boolean) => {
-    if (newV) {
-      autoPlay()
-    } else {
-      clearInterval(timer)
+    () => autoSwitch.value,
+    (newV: boolean) => {
+      if (newV) {
+        autoPlay()
+      } else {
+        clearInterval(timer)
+      }
+    },
+    {
+      immediate: true
     }
-  },
-  {
-    immediate: true
-  }
 )
 
 const handleMouseenter = () => {
@@ -181,6 +170,7 @@ const handleMouseleave = () => (isShowSvg.value = false)
     height: 100%;
     display: flex;
     overflow: hidden;
+
     .slide {
       width: 20%;
       height: 100%;
@@ -200,6 +190,7 @@ const handleMouseleave = () => (isShowSvg.value = false)
       }
     }
   }
+
   .arrow {
     position: absolute;
     top: 50%;
@@ -211,11 +202,13 @@ const handleMouseleave = () => (isShowSvg.value = false)
     background-color: white;
     opacity: 0.5;
   }
+
   a.left {
     @extend .arrow;
     background-image: url('./static/left.svg');
     left: 0px;
   }
+
   a.right {
     @extend .arrow;
     background-image: url('./static/right.svg');

 <template>
-  <collapse-item name="数据源(option配置里的内容)" :expanded="true">
+  <collapse-item name="数据源(option配置里的内容,注意去除末尾分号)" :expanded="true">
     <monaco-editor v-model:modelValue="optionData.dataset" width="400px" height="480px" language="json" />
   </collapse-item>
 </template>

-<template>
-  <div ref="playerContainerElRef" class="go-content-box"
-    :style="{ width: baseSize?.w + 'px', height: baseSize?.h + 'px', background: '#000' }">
-
-  </div>
-</template>
-<script setup lang="ts">
-import { ref, onUnmounted, watch, unref, PropType, shallowRef } from 'vue'
-import videojs from 'video.js'
-import 'videojs-flvjs-es6'
-import type { VideoJsPlayerOptions } from 'video.js'
-import 'video.js/dist/video-js.min.css'
-import { getJwtToken, getShareJwtToken } from '@/utils/external/auth'
-import { isShareMode } from '@/views/share/hook'
-import { getOpenFlvPlayUrl, closeFlvPlay } from '@/api/external/flvPlay'
-import { useFingerprint } from '@/utils/external/useFingerprint'
-import { GetResult } from '@fingerprintjs/fingerprintjs'
-import { VideoPlayerTypeEnum } from '../config'
-
-const props = defineProps({
-  sourceSrc: {
-    type: String
-  },
-  autoPlay: {
-    type: Boolean
-  },
-  name: {
-    type: String
-  },
-  avatar: {
-    type: String
-  },
-  baseSize: {
-    type: Object as PropType<{ w: number; h: number }>
-  }
-})
-
-const isRtspProtocol = (url: string) => {
-  const reg = /^rtsp:\/\//g
-  return reg.test(url)
-}
-
-const getVideoTypeByUrl = (url = '') => {
-  if (!url) return;
-  try {
-    const { protocol, pathname } = new URL(url)
-    if (protocol.startsWith('rtsp:')) return VideoPlayerTypeEnum.flv
-    const reg = /[^.]\w*$/
-    const mathValue = pathname.match(reg) || []
-    const ext = (mathValue[0] as keyof typeof VideoPlayerTypeEnum) || 'webm'
-    const type = VideoPlayerTypeEnum[ext]
-    return type ? type : VideoPlayerTypeEnum.webm
-  } catch (error) {
-    console.error(error)
-    return VideoPlayerTypeEnum.webm
-  }
-}
-
-// video实例对象
-const videoPlayer = shallowRef<videojs.Player | null>(null)
-const playerContainerElRef = shallowRef<HTMLElement | null>(null)
-
-const fingerprintResult = ref<Nullable<GetResult>>(null)
-
-//options配置
-const options: VideoJsPlayerOptions & Recordable = {
-  language: 'zh-CN', // 设置语言
-  controls: true, // 是否显示控制条
-  autoplay: !!props.autoPlay, // 是否自动播放
-  fluid: false, // 自适应宽高
-  poster: props?.avatar || '',
-  sources: [],
-  muted: !!props.autoPlay,
-  userActions: {
-    hotkeys: true
-  },
-  techOrder: ['html5', 'flvjs'],
-  flvjs: {
-    mediaDataSource: {
-      isLive: true,
-      cors: true,
-      withCredentials: false,
-      hasAudio: false
-    },
-    config: {
-      autoCleanupSourceBuffer: true
-    }
-  }
-}
-
-const { getResult } = useFingerprint()
-
-async function getSource() {
-  fingerprintResult.value = await getResult()
-  let src = props.sourceSrc || ''
-  if (isRtspProtocol(props.sourceSrc!)) {
-    src = getOpenFlvPlayUrl(src, unref(fingerprintResult)?.visitorId || '')
-  }
-  return [
-    {
-      type: getVideoTypeByUrl(props.sourceSrc),
-      src
-    }
-  ]
-}
-
-function createVideoElement() {
-  if (!unref(playerContainerElRef)) return
-  unref(playerContainerElRef)!.innerHTML = ''
-  const video = document.createElement('video')
-  video.setAttribute('crossOrigin', 'anonymous')
-  video.style.setProperty('width', '100%')
-  video.style.setProperty('height', '100%')
-  video.classList.add('video-js', 'my-video', 'vjs-theme-city', 'vjs-big-play-centered')
-  unref(playerContainerElRef)?.appendChild(video)
-  return video
-}
-
-
-// 初始化videojs
-const createVideoPlayer = async () => {
-  if (unref(videoPlayer)) dispose()
-
-  options.sources = await getSource()
-
-  if (isRtspProtocol(props.sourceSrc || '')) {
-    options.flvjs = {
-      ...(options.flvjs || {}),
-      config: {
-        headers: {
-          'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`
-        }
-      }
-    }
-  }
-  const video = createVideoElement()
-  if (!video) return
-
-  videoPlayer.value = videojs(video!, options) //fix 修复videojs解决直播延时的问题
-
-  videoPlayer.value?.on('timeupdate', function () {
-    // 计算表最新推流的时间和现在播放器播放推流的时间
-    let differTime =
-      (unref(videoPlayer))!.buffered()?.end(0) -
-      (unref(videoPlayer))!.currentTime() // 差值小于1.5s时根据1倍速进行播放
-    if (differTime < 1.5) {
-      videoPlayer.value?.playbackRate(1)
-    } // 差值大于1.5s小于10s根据1.2倍速进行播放
-    if (differTime < 10 && differTime > 1.5) {
-      videoPlayer.value?.playbackRate(1.2)
-    } // 差值大于10s时进行重新加载直播流
-    if (differTime > 10) {
-      createVideoPlayer()
-    }
-  })
-}
-
-// watch(
-//   () => props.sourceSrc,
-//   async () => {
-//     (props as any ).sourceSrc = ''
-//     if(!props.sourceSrc) return;
-//     await nextTick();
-//     if(unref(fingerprintResult)!.visitorId!) {
-//        closeFlvPlay(props.sourceSrc!, unref(fingerprintResult)!.visitorId!)
-//     }
-//     videoPlayer.value?.src('');
-//     createVideoPlayer() 
-
-//     if (props.sourceSrc) {
-//       reloadSource({ src: props.sourceSrc, type: getVideoTypeByUrl(props.sourceSrc) })
-//     }
-//   }
-// )
-
-watch(
-  () => props.autoPlay,
-  async (newData: boolean) => {
-    if (newData) {
-      handleVideoPlay()
-    } else {
-      videoPlayer.value?.pause()
-    }
-  },
-)
-
-// onMounted(() => {
-//   createVideoPlayer()
-// })
-
-onUnmounted(() => {
-  if (props.sourceSrc) {
-    closeFlvPlay(props.sourceSrc, unref(fingerprintResult)!.visitorId!)
-  }
-  handleVideoDispose()
-})
-
-
-function anewInit() {
-  createVideoPlayer()
-}
-
-function reloadSource(sources: string | videojs.Tech.SourceObject | videojs.Tech.SourceObject[]) {
-  if (!unref(videoPlayer)) return
-  unref(videoPlayer)?.pause()
-  unref(videoPlayer)?.src(sources)
-  unref(videoPlayer)?.load()
-  unref(videoPlayer)?.play()
-}
-
-function dispose() {
-  unref(videoPlayer)?.dispose()
-  videoPlayer.value = null
-}
-
-//播放
-const handleVideoPlay = () => videoPlayer.value?.play()
-
-//暂停和销毁
-const handleVideoDispose = () => videoPlayer.value?.dispose()
-
-defineExpose({
-  dispose,
-  reloadSource,
-  anewInit,
-})
-
-</script>
-
-<style lang="scss" scoped>
-.go-content-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  .my-video {
-    width: 100% !important;
-    height: 100% !important;
-    position: relative;
-  }
-}
-</style>
-<style>
-.vjs-poster {
-  background-size: 100% !important;
-}
-</style>

-import VideoPlay from './VideoPlay.vue'
-
-export { VideoPlay }

@@ -2,6 +2,11 @@ import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { SingleCameraConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import {StreamType} from "@/components/Video/src/types";
+import {useFingerprint} from "@/utils/external/useFingerprint";
+import {getOpenFlvPlayUrl, getVideoControlStart} from "@/api/external/flvPlay";
+import {getVideoUrl} from "@/api/external/common";
+import {CameraRecord} from "@/api/external/common/model";
 
 export enum sourceTypeEnum {
   CUSTOM = 'custom',
@@ -13,6 +18,11 @@ export enum sourceTypeNameEnum {
   PLATFORM = '平台获取'
 }
 
+export enum FluoriteMideaProtocolEnum {
+  HLS = 2,
+  FLV = 4,
+}
+
 export enum VideoPlayerTypeEnum {
   m3u8 = 'application/x-mpegURL',
   mp4 = 'video/mp4',
@@ -32,6 +42,7 @@ export interface videoListInterface {
   deviceId: string
   customUrl: string
   params: GBT28181Params
+  playProtocol?: number
 }
 
 export interface GBT28181Params {
@@ -53,6 +64,7 @@ export interface Dataset {
   deviceId?: string
   id?: string
   value?: string
+  playProtocol?: number
 }
 
 export const option = {
@@ -70,3 +82,42 @@ export default class Config extends PublicConfigClass implements CreateComponent
   public chartConfig = cloneDeep(SingleCameraConfig)
   public option = cloneDeep(option)
 }
+
+export const isRtspProtocol = (url: string) => {
+  const reg = /^rtsp:\/\//g;
+  return reg.test(url);
+};
+
+export async function getPlayUrl(
+    params: CameraRecord
+): Promise<{ url: string; type: StreamType } | undefined> {
+  const { accessMode } = params;
+  if (accessMode === AccessMode.ManuallyEnter) {
+    const { videoUrl } = params;
+    if (params.videoUrl) {
+      const isRTSPPlay = isRtspProtocol(videoUrl);
+
+      if (isRTSPPlay) {
+        const { getResult } = useFingerprint();
+        const fingerprint = await getResult();
+        return { url: getOpenFlvPlayUrl(videoUrl, fingerprint.visitorId), type: 'flv' };
+      } else {
+        return { url: videoUrl, type: 'auto' };
+      }
+    }
+  } else if (accessMode === AccessMode.GBT28181) {
+    const { deviceId, channelNo } = params?.params || {};
+    const result = await getVideoControlStart({ channelId: channelNo!, deviceId: deviceId! });
+    return { url: result.data.flv, type: 'flv' };
+  } else {
+    const { id, playProtocol } = params;
+    const result = await getVideoUrl(id);
+    const type: StreamType =
+        playProtocol === FluoriteMideaProtocolEnum.FLV
+            ? 'flv'
+            : playProtocol === FluoriteMideaProtocolEnum.HLS
+                ? 'hls'
+                : 'auto';
+    return { url: result.data.url, type };
+  }
+}

@@ -97,7 +97,7 @@ const handleUpdateTreeValue = (value: string) => {
 const getVideoLists = async (organizationId: string) => {
   const res = await getVideoList({ organizationId })
   if (!res) return
-  videoOptions.value = res?.data?.map((item: videoListInterface) => {
+  videoOptions.value = res?.data?.map((item) => {
     return {
       label: item.name,
       value: item.id,
@@ -105,8 +105,9 @@ const getVideoLists = async (organizationId: string) => {
       id: item.id,
       accessMode: item.accessMode,
       channelId: item.accessMode === AccessMode.GBT28181 ? item?.params?.channelNo : '', //参数只给gbt28181使用
-      deviceId: item.accessMode === AccessMode.GBT28181 ? item?.params?.deviceId : '' //参数只给gbt28181使用
-    }
+      deviceId: item.accessMode === AccessMode.GBT28181 ? item?.params?.deviceId : '', //参数只给gbt28181使用
+      playProtocol: item?.playProtocol
+    } as any
   })
 }
 

 <template>
   <div>
-    <n-spin size="medium" :show="showLoading" :content-style="{ background: 'red' }">
-      <template #description> 视频正在努力加载中...... </template>
-      <div>
-        <VideoPlay ref="videoPlayerRef" :baseSize="{ w, h }" :sourceSrc="sourceUrl" :autoPlay="option.autoplay"
-          :avatar="option.poster" />
-      </div>
+    <n-spin size="medium" :show="showLoading" class="player-spin">
+      <XGPlayer :url="sourceUrl" :stream-type="playType"
+                :config="{width: '100%', height: '100%', poster: option.poster}"
+                :auto-play="option.autoplay"/>
     </n-spin>
   </div>
 </template>
 <script setup lang="ts">
-import { PropType, toRefs, shallowReactive, watch, ref } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { AccessMode, Dataset, option as configOption, sourceTypeEnum } from './config'
-import { VideoPlay } from './components'
-import { getVideoControlStart } from '@/api/external/flvPlay'
-import { getVideoUrl } from '@/api/external/common'
+import {PropType, toRefs, shallowReactive, watch, ref} from 'vue'
+import {CreateComponentType} from '@/packages/index.d'
+import {Dataset, getPlayUrl, option as configOption} from './config'
+import {XGPlayer} from '@/components/Video'
+import {StreamType} from "@/components/Video/src/types";
+import {CameraRecord} from "@/api/external/common/model";
 
 const props = defineProps({
   chartConfig: {
@@ -26,9 +24,9 @@ const props = defineProps({
 
 const showLoading = ref(false)
 
-const { w, h } = toRefs(props.chartConfig.attr)
+const {w, h} = toRefs(props.chartConfig.attr)
 
-const { autoplay, dataset, poster, customVideoUrl } = toRefs(props.chartConfig.option as typeof configOption)
+const {autoplay, dataset, poster, customVideoUrl} = toRefs(props.chartConfig.option as typeof configOption)
 
 const option = shallowReactive({
   dataset: configOption.dataset,
@@ -37,87 +35,47 @@ const option = shallowReactive({
 })
 
 const sourceUrl = ref('')
-const videoPlayerRef = ref<InstanceType<typeof VideoPlay> | null>()
-
-// 针对萤石云或者海康威视，根据视频id获取播放流地址
-const getVideoUrlById = async (id: string) => {
-  const res = await getVideoUrl(id)
-  if (!res) return
-  const { url } = res.data
-  return url
-}
-
-// 针对gbt28181，根据设备id和通道号获取播放流地址
-const getVideoControlList = async (deviceId: string, channelId: string) => {
-  const {
-    data: { flv }
-  } = await getVideoControlStart({
-    deviceId,
-    channelId
-  })
-  return flv
-}
-
-// 针对自定义地址，直接获取地址
-const getCustomUrl = (url: string) => {
-  return url
-}
+const playType = ref<StreamType>()
 
 
 async function getPlaySource(params: Dataset) {
-  try {
-    showLoading.value = true
-
-    const { accessMode, id, deviceId, channelId, customUrl } = params
-    if (accessMode === AccessMode.Streaming && id) {
-      return await getVideoUrlById(id!)
-    } else if (accessMode === AccessMode.GBT28181 && deviceId && channelId) {
-      return await getVideoControlList(deviceId!, channelId!)
-    } else {
-      return getCustomUrl(customUrl!)
-    }
-  } finally {
-    showLoading.value = false
-  }
+    const {id, channelId, deviceId, accessMode, customUrl, playProtocol} = params
+    if (!accessMode) return
+    const {type, url} = await getPlayUrl({
+      id: id,
+      accessMode: accessMode,
+      playProtocol: playProtocol,
+      videoUrl: customUrl,
+      params: {
+        deviceId: deviceId,
+        channelNo: channelId,
+      },
+    } as unknown as CameraRecord) || {}
+    sourceUrl.value = url!
+    playType.value = type
 }
 
 watch(
-  () => dataset?.value,
-  async (newData) => {
-    videoPlayerRef.value?.dispose()
-    sourceUrl.value = await getPlaySource(newData)
-    videoPlayerRef.value?.anewInit()
-  },
-  {
-    immediate: true
-  }
-)
-
-watch(
-  () => customVideoUrl.value,
-   (newData) => {
-     if(newData){
-      videoPlayerRef.value?.dispose()
-      sourceUrl.value = newData;
-      videoPlayerRef.value?.anewInit()
+    () => dataset?.value,
+    async (newData) => {
+      getPlaySource(newData)
+    },
+    {
+      immediate: true
     }
-  },
-  {
-    immediate: true
-  }
 )
 
-watch(
-  () => [poster.value, autoplay.value],
-  newData => {
-    option.poster = newData.at(-2) as string
-    option.autoplay = newData.at(-1) as boolean
-  },
-  {
-    immediate: true
-  }
-)
 </script>
 
 <style lang="scss" scoped>
+.player-spin {
+  width: 100%;
+  height: 100%;
+  @include deep() {
+    .n-spin-content {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
 </style>

 <script lang="ts" setup>
-import { NFormItem, NGi, NGrid, NSelect, NDatePicker, NInputNumber } from 'naive-ui';
-import { defaultIntervalOptions, aggergationOptions } from '../DynamicForm/timeInterval'
-import { unref, computed, ref, watch } from 'vue';
-import { isObject } from '@/utils/external/is';
+import {NFormItem, NGi, NGrid, NSelect, NDatePicker, NInputNumber} from 'naive-ui';
+import {defaultIntervalOptions, aggergationOptions} from '../DynamicForm/timeInterval'
+import {unref, computed, ref, watch} from 'vue';
+import {isObject} from '@/utils/external/is';
+import dayjs from "dayjs";
 
 interface Value {
   agg?: Nullable<string>
@@ -13,12 +14,12 @@ interface Value {
 }
 
 const props = withDefaults(
-  defineProps<{
-    value?: Value
-  }>(),
-  {
-    value: () => ({})
-  }
+    defineProps<{
+      value?: Value
+    }>(),
+    {
+      value: () => ({})
+    }
 )
 
 const emit = defineEmits<{
@@ -31,6 +32,26 @@ const timePeriod = ref<Nullable<[number, number]>>(null)
 const agg = ref()
 const interval = ref()
 const limit = ref(7)
+const rangeShortcuts = {
+  昨天: () => {
+    return [
+      dayjs().startOf('day').valueOf(),
+      dayjs().endOf('day').valueOf()
+    ] as const
+  },
+  最近7天: () => {
+    return [
+      dayjs().subtract(6, 'day').startOf('day').valueOf(),
+      dayjs().endOf('day').valueOf()
+    ] as const
+  },
+  最近30天: () => {
+    return [
+      dayjs().subtract(29, 'day').startOf('day').valueOf(),
+      dayjs().endOf('day').valueOf()
+    ] as const
+  }
+}
 
 const getRangeOptions = (number: number) => {
   for (let i = 0; i < defaultIntervalOptions.length; i++) {
@@ -55,32 +76,32 @@ const getIntervalTimeOptions = computed(() => {
 
 const handleTimePerionChange = (value: number[]) => {
   const [startTs, endTs] = value || []
-  emit('update:value', { ...props.value, startTs, endTs, interval: null })
-  emit('change', { ...props.value || {}, startTs, endTs, interval: null })
+  emit('update:value', {...props.value, startTs, endTs, interval: null})
+  emit('change', {...props.value || {}, startTs, endTs, interval: null})
 }
 
 const handleAggChange = (value: string) => {
-  const _value = { ...props.value, agg: value, ...(value === 'NONE' ? { limit: 7 } : {}) }
+  const _value = {...props.value, agg: value, ...(value === 'NONE' ? {limit: 7} : {})}
   Reflect.deleteProperty(_value, value === 'NONE' ? 'interval' : 'limit')
   emit('update:value', _value)
   emit('change', _value)
 }
 
 const handleIntervalChange = (value: number) => {
-  const _value = { ...props.value, interval: value }
+  const _value = {...props.value, interval: value}
   emit('update:value', _value)
   emit('change', _value)
 }
 
 const handleLimitChange = (value: Nullable<number>) => {
-  const _value = { ...props.value, limit: value }
+  const _value = {...props.value, limit: value}
   emit('update:value', _value)
   emit('change', _value)
 }
 
 watch(() => props.value, (target) => {
   if (target && isObject(target)) {
-    const { agg: _agg, interval: _interval, startTs, endTs, limit: _limit } = target || {}
+    const {agg: _agg, interval: _interval, startTs, endTs, limit: _limit} = target || {}
     if (startTs && endTs) {
       timePeriod.value = [startTs!, endTs!]
     } else {
@@ -97,26 +118,29 @@ watch(() => props.value, (target) => {
   <NGrid :cols="24">
     <NGi :span="16">
       <NFormItem :show-label="false">
-        <NDatePicker v-model:value="timePeriod" type="datetimerange" placeholder="请选择时间范围"
-          @update-value="handleTimePerionChange" clearable :default-time="['00:00:00', '23:59:59']"></NDatePicker>
+        <NDatePicker :shortcuts="rangeShortcuts" v-model:value="timePeriod" type="datetimerange"
+                     placeholder="请选择时间范围"
+                     @update-value="handleTimePerionChange" clearable
+                     :default-time="['00:00:00', '23:59:59']"></NDatePicker>
       </NFormItem>
     </NGi>
     <NGi :span="4">
       <NFormItem :show-label="false">
         <NSelect v-model:value="agg" @update:value="handleAggChange" :options="aggergationOptions" label-field="name"
-          value-field="id" placeholder="聚合方式" clearable></NSelect>
+                 value-field="id" placeholder="聚合方式" clearable></NSelect>
       </NFormItem>
     </NGi>
     <NGi v-if="!getShowLimit" :span="4">
       <NFormItem :show-label="false">
         <NSelect v-model:value="interval" @update:value="handleIntervalChange" :options="getIntervalTimeOptions"
-          label-field="name" value-field="id" placeholder="间隔时间" clearable></NSelect>
+                 label-field="name" value-field="id" placeholder="间隔时间" clearable></NSelect>
       </NFormItem>
     </NGi>
     <NGi v-if="getShowLimit" :span="4">
       <NFormItem :show-label="false">
         <NInputNumber v-model:value="limit" :default-value="7" @update:value="handleLimitChange"
-          :parse="(input: string) => parseInt(input)" :min="7" :max="50000" :step="1" placeholder="请输入最大条数" />
+                      :parse="(input: string) => parseInt(input)" :min="7" :max="50000" :step="1"
+                      placeholder="请输入最大条数"/>
       </NFormItem>
     </NGi>
   </NGrid>

@@ -109,6 +109,7 @@ const getSharePageContentData = async () => {
       // chartEditStore.requestGlobalConfig = requestGlobalConfig
       // chartEditStore.componentList = componentList
       chartEditStore.setPageConfig(content.pageConfig)
+      chartEditStore.setCurrentPageSelectId(content.pageConfig.pageList[0].id)
       // handleRegisterComponent(componentList)
       content.pageConfig.pageList.forEach(pageItem=>{
         handleRegisterComponent(pageItem.componentList)