大屏主界面新增监控

package.json

@@ -14,10 +14,12 @@
     "core-js": "^2.6.5",
     "echarts": "^5.2.2",
     "element-ui": "^2.15.2",
+    "flv.js": "^1.6.2",
     "font-awesome": "^4.7.0",
     "less-loader": "5.0.0",
     "node-modules": "^1.0.1",
     "pinyin-pro": "^3.7.1",
+    "videojs-contrib-hls": "^5.15.0",
     "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
     "vue-awesome": "^4.0.2",
@@ -30,6 +32,7 @@
     "vue-infinite-scroll": "^2.0.2",
     "vue-loader": "^15.9.8",
     "vue-router": "^3.0.3",
+    "vue-video-player": "^5.0.2",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.0.1"
   },

src/common/m3u8.vue

@@ -0,0 +1,84 @@
+<template>
+  <video-player
+    class="vjs-custom-skin video-js vjs-big-play-centered"
+    ref="videoPlayer"
+    :options="playerOptions"
+    :events="events"
+    @ready="playerReadied"
+    @fullscreenchange="onPlayerFullScreenchange"
+    width="240"
+    height="160"
+  >
+  </video-player>
+</template>
+
+<script>
+import "videojs-contrib-hls";
+export default {
+  props: {
+    src: {
+      type: String,
+      default: "http://stream.snrtv.com/sxbc-star-cqFGJO.m3u8",
+    },
+  },
+  data() {
+    return {
+      playerOptions: {
+        sources: [
+          {
+            withCredentials: false,
+            type: "application/x-mpegURL",
+            src: this.src,
+          },
+        ],
+        controlBar: {
+          playToggle: false, // 播放暂停按钮
+          currentTimeDisplay: true,
+          timeDivider: false,
+          durationDisplay: false,
+          progressControl: true,
+          liveDisplay: true,
+          fullscreenToggle: true,
+        },
+        language: "zh-CN",
+        flash: { hls: { withCredentials: false } },
+        html5: { hls: { withCredentials: false } },
+        techOrder: ["html5", "flash"], // 兼容顺序
+        autoplay: true, // 自动播放
+        fluid: true, // 按比例缩放适应容器
+        preload: "auto", // 预加载
+        muted: true, // 消除所有音频
+        aspectRatio: "16:9",
+      },
+      events: ["fullscreenchange"],
+      flag: true,
+    };
+  },
+  methods: {
+    playerReadied(player) {
+      player.tech({ IWillNotUseThisInPlugins: true }).hls;
+      player.tech_.off("mousedown");
+      player.tech_.hls.xhr.beforeRequest = function (options) {
+        return options;
+      };
+    },
+    onPlayerFullScreenchange() {
+      if (this.flag) {
+        console.log(this.$refs.videoPlayer);
+        this.$refs.videoPlayer.muted = !this.$refs.videoPlayer.muted;
+      }
+      this.flag = !this.flag;
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.vjs-tech {
+  pointer-events: none;
+}
+.video-js {
+    width: 240px;
+    height: 160px;
+}
+</style>

src/components/newmain/item3/index.vue

@@ -128,7 +128,7 @@ export default {
           },
           // barWidth: "10",
           barCategoryGap: "5%",
-          data: [90, 95, 85, 92],
+          data: [70, 75, 88, 92],
         },
       ],
     };

src/main.js

@@ -8,6 +8,11 @@ import axios from "axios";
 import VueAxios from 'vue-axios'
 import Antd from 'ant-design-vue'
 import dataV from '@jiaminghi/data-view';
+// 播放器组件库
+import VideoPlayer from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+import 'vue-video-player/src/custom-theme.css'
+
 import 'font-awesome/css/font-awesome.css'
 
 
@@ -52,6 +57,7 @@ Vue.use(Antd)
 Vue.use(dataV);
 Vue.use(Viser)
 Vue.mixin(mixin)
+Vue.use(VideoPlayer)
 
 // Vue.prototype.$bus = new Vue()
 new Vue({

src/router/index.js

@@ -531,7 +531,7 @@ const router = new Router({
           path: "/main",
           name: "主界面",
           id: 111,
-          component: () => import("../views/newMain.vue"),
+          component: () => import("../views/newmain.vue"),
           hidden: false,
         },
         {

src/views/newmain.vue

@@ -4,19 +4,18 @@
     <div class="span-col-2 span-row-3 item2"><Main></Main></div>
     <!-- <div class="span-col-2 span-row-3 item2">item2</div> -->
     <div class="item3"><item3></item3></div>
-    <!-- 掘进进尺 -->
     <div class="item4"><excavation></excavation></div>
     <div class="item5"><item5></item5></div>
     <div class="item6"><item6></item6></div>
     <div class="item7"><item7></item7></div>
     <div class="item8"><coal-proportion></coal-proportion></div>
     <div class="span-col-2 span-row-2 item9">
-      <div class="watch watch1"></div>
-      <div class="watch watch2"></div>
-      <div class="watch watch3"></div>
-      <div class="watch watch4"></div>
-      <div class="watch watch5"></div>
-      <div class="watch watch6"></div>
+      <div class="watch watch1"><m3u8></m3u8></div>
+      <div class="watch watch2"><m3u8></m3u8></div>
+      <div class="watch watch3"><m3u8></m3u8></div>
+      <div class="watch watch4"><m3u8></m3u8></div>
+      <div class="watch watch5"><m3u8></m3u8></div>
+      <div class="watch watch6"><m3u8></m3u8></div>
     </div>
     <div class="item10"><equipment></equipment></div>
     <div class="item11"><coal-position></coal-position></div>
@@ -36,6 +35,7 @@ import excavation from "@/components/newMain/item4";
 import coalPosition from "@/components/newMain/item11";
 import coalProportion from "@/components/newMain/item8";
 import equipment from "@/components/newMain/item10";
+import m3u8 from "@/common/m3u8";
 
 export default {
   name: "newMain",
@@ -50,7 +50,8 @@ export default {
     excavation,
     coalPosition,
     coalProportion,
-    equipment
+    equipment,
+    m3u8,
   },
 };
 </script>
@@ -64,7 +65,7 @@ export default {
       rgba(0, 0, 0, 0.25) 200%
     );
   width: 100%;
-  height: 890px;
+  height: 100vh;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: repeat(5, 1fr);
@@ -83,11 +84,7 @@ export default {
 }
 .item9 {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(5, 148px);
-  grid-gap: 10px;
-  .watch {
-    background-color: aqua;
-  }
+  grid-template-columns: repeat(3, 260px);
+  grid-gap: 5px;
 }
 </style>