沙盘视频模块修改 资源替换

public/index.html

@@ -15,6 +15,7 @@
       }
     }
   </script>
+  <script src="./static/js/hlslib/hls.min.js"></script>
   <style type="text/css">
     #ie_dialog {
       width: 350px;

src/main.js

@@ -14,6 +14,8 @@ import locale from 'element-plus/lib/locale/lang/zh-cn';
 // 引入环境配置
 import "@modeConfig/modeConfig.js";
 
+// import '../public/static/js/hlslib/hls.min.js';
+
 import "@/lib/global-import.js";
 
 // 引入请求工具

src/views/SandTable/SandTable.vue

@@ -48,7 +48,7 @@
     </div>
     <div class="sand-table-right" v-if="showPanel">
       <PanelSand class="right-panel" title="视频监控">
-        <el-row v-for="(pItem, pIndex) in videoArray" :key="pIndex">
+        <!-- <el-row v-for="(pItem, pIndex) in videoArray" :key="pIndex">
           <el-col
             :span="12"
             class="pre-img-box"
@@ -65,6 +65,32 @@
               :src="cItem.url + cItem.token"
               v-if="cItem.switch"
             />
+          </el-col> -->
+        <el-row v-for="(pItem, pIndex) in videoArray1" :key="pIndex">
+          <el-col
+            :span="12"
+            class="pre-img-box"
+            v-for="(cItem, cIndex) in pItem"
+            :key="cIndex"
+            @click="openVideoDialog1(cItem)"
+          >
+            <div class="mask"></div>
+            <hlsVideo
+              class="pre-img videoBoxiframe"
+              width="95%"
+              height="8.657vh"
+              :code="cItem.code"
+              :class="cItem.class"
+              v-if="cItem.switch"
+            />
+            <!-- <iframe
+              class="pre-img videoBoxiframe"
+              :class="cItem.class"
+              width="95%"
+              height="8.657vh"
+              src="http://192.168.1.18:1935/hls/NSS_FDC_ZK/index.m3u8"
+              v-if="cItem.switch"
+            /> -->
           </el-col>
         </el-row>
       </PanelSand>
@@ -421,11 +447,17 @@
         videoDialogClass = 'modal animated a1 bounceIn';
       "
     >
-      <iframe
+      <!-- <iframe
         class="videoBoxiframe"
         width="95%"
         height="800px"
         :src="dialogVideoUrl"
+      /> -->
+      <hlsVideo
+        class="videoBoxiframe"
+        width="95%"
+        height="800px"
+        :code="dialogVideoUrl"
       />
     </el-dialog>
   </div>
@@ -445,6 +477,7 @@ import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
 import Col from "@com/coms/grid/col.vue";
 import Row from "@com/coms/grid/row.vue";
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
+import hlsVideo from "./component/hls.vue";
 
 export default {
   // 名称
@@ -464,6 +497,7 @@ export default {
     Col,
     Row,
     SvgIcon,
+    hlsVideo,
   },
   // 数据
   data() {
@@ -500,6 +534,32 @@ export default {
       gxkmap: {},
       tableItem: {},
       mapSource: {},
+      videoArray1: [
+        // [
+        //   { code: "NSS_FDC_ZK", class: "", switch: true },
+        //   { code: "NSS_FDC_ZK", class: "", switch: true },
+        // ],
+        // [
+        //   { code: "NSS_FDC_ZK", class: "", switch: true },
+        //   { code: "QS_FDC_ZK", class: "", switch: true },
+        // ],
+        // [
+        //   { code: "QS_FDC_ZK", class: "", switch: true },
+        //   { code: "QS_FDC_ZK", class: "", switch: true },
+        // ],
+        [
+          { code: "SBQ_FDC_SC", class: "", switch: true },
+          { code: "NSS_FDC_SC", class: "", switch: true },
+        ],
+        [
+          { code: "QS_FDC_SC", class: "", switch: true },
+          { code: "MHS_FDC_SC", class: "", switch: true },
+        ],
+        [
+          { code: "XS_FDC_SC", class: "", switch: true },
+          { code: "PL_GDC_SC", class: "", switch: true },
+        ],
+      ],
       videoArray: [
         [
           {
@@ -655,6 +715,13 @@ export default {
       }
     },
 
+    openVideoDialog1(item) {
+      if (item.code) {
+        this.dialogVideoUrl = item.code;
+        this.showVideoDialog = true;
+      }
+    },
+
     getWtInfo() {
       let that = this;
       that.API.requestData({
@@ -743,7 +810,6 @@ export default {
           stationid: that.wpId,
         },
         success(res) {
-          console.log(res);
           let warnChartData = [];
           for (let key in res.data) {
             const ele = res.data[key];
@@ -890,15 +956,31 @@ export default {
     // 点击风场或者光伏
     clickMapItem(videoArray, wpId) {
       this.wpId = wpId;
-      this.videoArray.forEach((pEle, pIndex) => {
+      // this.videoArray.forEach((pEle, pIndex) => {
+      //   pEle.forEach((cEle, cIndex) => {
+      //     setTimeout(() => {
+      //       // 设置隐藏动画
+      //       cEle.class = "animated a1 flipOutX";
+      //       setTimeout(() => {
+      //         // 修改 token
+      //         cEle.token =
+      //           "?token=" + videoArray[pIndex + cIndex] + "&autoplay=true";
+      //         setTimeout(() => {
+      //           // 设置显示动画
+      //           cEle.class = "animated a1 flipInX";
+      //         }, 150);
+      //       }, 350);
+      //     }, (pIndex + cIndex + pIndex) * 150);
+      //   });
+      // });
+      this.videoArray1.forEach((pEle, pIndex) => {
         pEle.forEach((cEle, cIndex) => {
           setTimeout(() => {
             // 设置隐藏动画
             cEle.class = "animated a1 flipOutX";
             setTimeout(() => {
               // 修改 token
-              cEle.token =
-                "?token=" + videoArray[pIndex + cIndex] + "&autoplay=true";
+              cEle.code = videoArray[pIndex + cIndex];
               setTimeout(() => {
                 // 设置显示动画
                 cEle.class = "animated a1 flipInX";

src/views/SandTable/component/ThreeModel1.vue

@@ -175,7 +175,7 @@ export default {
             this.gzsl = this.htmlLayer[0].gzsl;
             that.clickMapItem(
               [
-                "MHS_FDC",
+                "MHS_FDC_SC",
                 "MG01_01_TD",
                 "MG01_02_TD",
                 "MG01_03_TD",

src/views/SandTable/component/hls.vue

@@ -0,0 +1,138 @@
+<template>
+  <video
+    class="hlsVideo"
+    ref="hlsVideo"
+    autoplay
+    muted
+    :style="'width:' + width + ';height:' + height"
+    v-if="code"
+  ></video>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "Hls",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    code: {
+      type: String,
+      default: "",
+    },
+  },
+  emits: {},
+  // 数据
+  data() {
+    return {
+      socket: null,
+      isReady: false,
+      devs: [],
+      hls: null,
+      currDevCode: null,
+    };
+  },
+  // 函数
+  methods: {
+    _play: function () {
+      if (Hls.isSupported()) {
+        var self = this;
+        self.$nextTick(function () {
+          var video = self.$refs.hlsVideo;
+          self.hls && self.hls.destroy();
+          video.volume = 1.0;
+          self.hls = new Hls();
+          self.hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            self.$refs.video.play();
+          });
+          self.hls.loadSource(
+            // `http://192.168.10.25:1935/hls/${self.currDevCode}/index.m3u8`
+            `http://192.168.1.18:1935/hls/${self.code}/index.m3u8`
+          );
+          self.hls.attachMedia(video);
+        });
+      }
+    },
+    onReady() {
+      this.send({ action: "loadDevs" });
+    },
+    onDevChoosed(index) {
+      this.currDevCode = this.devs[index].code;
+      this._play();
+    },
+    onMessage(data) {
+      var result = eval(data);
+      if (result.code === "fail") {
+        if (result.message) {
+          this.$message.error(result.message);
+        } else {
+          this.$message.error("操作失败");
+        }
+      } else if (result.action == "loadDevs") {
+        this.devs = result.object;
+      }
+
+      console.log("result", result);
+    },
+    send(message) {
+      if (!this.isReady) {
+        alert("this socket is not ready!");
+        return;
+      }
+      this.socket.send(JSON.stringify(message));
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+    var self = this;
+    if (window.WebSocket) {
+      self.socket = new WebSocket("ws://" + window.location.host + "/api.ws");
+      //建立websocket连接
+      self.socket.onopen = function () {
+        self.isReady = self.socket.readyState == 1;
+        self.onReady();
+      };
+      self.socket.onmessage = function (event) {
+        var data = JSON.parse(event.data);
+        self.onMessage(data);
+      };
+      self.socket.onclose = function (event) {
+        self.isReady = false;
+      };
+      self._play();
+    }
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {},
+  updated() {},
+  watch: {
+    code() {
+      this._play();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.hlsVideo {
+  object-fit: fill;
+}
+</style>