feat:新增视频播放组件

package.json

@@ -9,15 +9,18 @@
   },
   "dependencies": {
     "@ct/iframe-connect-sdk": "^1.0.17",
-    "axios": "^1.11.0",
-    "js-cookie": "3.0.5",
     "@turf/turf": "^7.2.0",
+    "artplayer": "^5.3.0",
+    "axios": "^1.11.0",
     "core-js": "^3.8.3",
     "echarts": "^5.5.1",
     "element-ui": "^2.15.14",
+    "flv.js": "^1.6.2",
+    "js-cookie": "3.0.5",
     "lodash-es": "^4.17.21",
     "mars3d": "^3.9.3",
     "mars3d-cesium": "^1.127.0",
+    "moment": "^2.30.1",
     "process": "^0.11.10",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",

src/components/video-player/video-player.vue

@@ -0,0 +1,51 @@
+<template>
+  <div ref="videoPlayer"></div>
+</template>
+
+<script>
+import Artplayer from 'artplayer'
+import flvjs from 'flv.js'
+export default {
+  name: 'ArtPlayer',
+  props: {
+    option: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      artPlayer: null
+    }
+  },
+  methods: {
+    initPlayer() {
+      this.artPlayer = new Artplayer({
+        ...this.option,
+        container: this.$refs.videoPlayer,
+        type:"flv",
+        customType: {
+          flv: (video, url, art) => {
+            if (flvjs.isSupported()) {
+              if (art.flv) art.flv.destroy()
+              const flv = flvjs.createPlayer({ type: 'flv', url })
+              flv.attachMediaElement(video)
+              flv.load()
+              art.flv = flv
+              art.on('destroy', () => flv.destroy())
+            }
+          }
+        }
+      })
+    }
+  },
+  mounted() {
+    this.initPlayer()
+  },
+  beforeDestroy() {
+    if (this.artPlayer) {
+      this.artPlayer.destroy(false)
+    }
+  }
+}
+</script>

src/views/announcement-management/index.vue

@@ -282,7 +282,7 @@ export default {
       })
     },
     handleAvatarSuccess(res, file) {
-      this.form.images = res.data.fileUrl
+      this.form.images = res.data.url
       this.imageUrl = res.url
       this.fileList = [file]
     },

src/views/index.vue

@@ -19,6 +19,7 @@
           <HydrologicInfo v-if="mainMenu === 'hydrologicInfo'"></HydrologicInfo>
           <SmartEarlyWarning v-if="mainMenu === 'smartEarlyWarning'" />
           <WaterStationPopup />
+          <VideoPlay/>
           <PlanDialog/>
         </div>
       </el-main>
@@ -39,6 +40,7 @@ import WaterStationPopup from '@/views/water-station-popup'
 import AddInspectionTask from './safety-inspection/addInspectionTask.vue'
 import SmartEarlyWarning from '@/views/smart-early-warning/index'
 import PlanDialog from './components/layerList/planDialog.vue'
+import VideoPlay from './video-play-popup/index.vue'
 const basePathUrl = window.basePathUrl || ''
 export default {
   name: 'MainView',
@@ -54,7 +56,8 @@ export default {
     WaterStationPopup,
     AddInspectionTask,
     SmartEarlyWarning,
-    PlanDialog
+    PlanDialog,
+    VideoPlay
   },
   data() {
     return {

src/views/video-play-popup/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="video-player-container" v-if="visible">
+    <Artplayer :option="option"  :style="style" @getInstance="getInstance" />
+  </div>
+</template>
+
+<script>
+import Artplayer from '@/components/video-player/video-player.vue'
+export default {
+  name: 'WaterStationPopup',
+  data() {
+    return {
+      visible: false,
+      title:'',
+      option:{
+        url:"ws://10.157.200.5:9381/live/43010000831327000018_0_0_39f33131b0ac4611a4e7da4d692a1195.flv",
+        isLive:true,//使用直播模式，会隐藏进度条和播放时间
+        autoplay:true,
+        muted: true//是否静音
+      },
+      style:{
+        width: '600px',
+        height: '400px',
+        margin: '60px auto 0',
+      }
+    }
+  },
+  components:{
+    Artplayer
+  },
+  mounted() {
+    this.$globalEventBus.$on('clickVideoPlay', (data) => {
+      this.visible = true
+      this.title = '巡查点'
+    })
+  },
+  destroyed() {
+    this.$globalEventBus.$off('clickVideoPlay')
+  },
+  methods: {
+    getInstance(art){
+      console.info(art)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.video-player-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -80%);
+  width: px-to-rem(600);
+  z-index: 9999;
+}
+</style>