车辆视频对接完毕（待测试/刷新功能）

public/index.html

@@ -42,6 +42,8 @@
       type="text/javascript"
     ></script>
 
+    <script src="./lib/flv.min.js"></script>
+
     <!-- <script src="./lib/localforage.js" type="text/javascript"></script>
     <script src="./lib/CesiumNetworkPlug.js" type="text/javascript"></script> -->
 

src/components/grids.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="container">
+    <div class="video-title">
+      <div class="main-title">车辆实时监控</div>
+      <div class="title-btn">
+        <img src="../assets/images/sx.png" alt="" />
+        刷新
+      </div>
+    </div>
     <div class="carousel">
       <div @click="scroll(-1)" class="scroll-btn left">
         <i class="el-icon-arrow-left"></i>
@@ -7,12 +14,19 @@
 
       <div class="items-wrapper" ref="itemsWrapper">
         <div v-for="(item, index) in items" :key="index" class="item">
-          <img src="../assets/images/video.jpg" class="video-src" alt="" />
+          <video
+            :id="'video' + index"
+            class="video-src"
+            autoplay="autoplay"
+            @timeupdate="handleTimeUpdate($event, index)"
+          />
+          <div class="video-bg" v-show="item.sate != 0">
+            {{ item.sate == 1 ? "正在播放中" : "已播放结束" }}
+          </div>
           <div class="video-data">
-            <div class="video-name">视频名称</div>
+            <div class="video-name">{{ item.tdhName }}</div>
-
             <img
-              @click="dialogVisible = true"
+              @click="handleVideo(item, index)"
               class="video-icon"
               src="../assets/images/zoom.png"
               alt=""
@@ -30,38 +44,201 @@
       :visible.sync="dialogVisible"
       append-to-body
       :modal="false"
+      :destroy-on-close="true"
     >
       <div class="video-dialog-top">
         <div class="video-name-data">001号线_01_早送_守押001_苏E</div>
-        <div class="dialog-close" @click="dialogVisible = false">
+        <div class="dialog-close" @click="handleClose('0521')">
           <img src="../assets/images/dialog-close.png" alt="" />
           收起
         </div>
       </div>
+
+      <video
+        v-if="dialogSate"
+        id="videoBig"
+        autoplay="autoplay"
+        @timeupdate="handleTimeUpdate($event, '0521')"
+      />
+      <div class="dialog-videoNodata" v-else>
+        <div class="video-title">
+          <div class="main-title">已播放结束</div>
+          <div class="title-btn">
+            <img src="../assets/images/sx.png" alt="" />
+            刷新
+          </div>
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { getCarPoint } from "@/api/yunkun/yunkun.js";
 export default {
   data() {
     return {
+      video_player: {},
+      video_uuid: {},
       dialogVisible: false,
-      items: [
+      dialogIndex: 0,
-        "Item 1",
+      dialogSate: false,
-        "Item 2",
+      items: [],
-        "Item 3",
-        "Item 4",
-        "Item 5",
-        "Item 6",
-        "Item 7",
-        "Item 8",
-        "Item 9",
-        "Item 10",
-      ],
     };
   },
+
+  created() {
+    this.getCarInfo();
+  },
+  beforeDestroy() {
+    this.items.forEach((item, index) => {
+      this.toclose(index);
+    });
+  },
   methods: {
+    /**获取该车辆 */
+    async getCarInfo() {
+      this.items = [];
+      let result = await getCarPoint({ carIds: this.$route.query.carId });
+      if (result.list && result.list.length > 0) {
+        let videos = JSON.parse(result.list[0].videos);
+        videos.vs = videos.vs.split(",");
+        videos.vs.forEach((str) => {
+          let firstPart = str.split(":")[0];
+          let secondPart = str.split(":")[1];
+          this.items.push({
+            tdh: firstPart,
+            tdhName: secondPart,
+            allStr: str,
+            sate: 0, //0 未播放 1 播放中 2 播放完
+          });
+        });
+
+        this.$nextTick(() => {
+          this.items.forEach((item, index) => {
+            this.toplay(index, item.tdh);
+          });
+        });
+      }
+    },
+    handleTimeUpdate(event, index) {
+      const currentTime = event.target.currentTime;
+      //自动播放分钟 == 300
+      if (currentTime >= 15) {
+        this.toclose(index);
+        if (index == "0521") {
+          this.dialogSate = false;
+          this.items[this.dialogIndex].sate = 2;
+          return;
+        }
+        this.items[index].sate = 2;
+      }
+      // console.log("Current time: ", event.target.currentTime, index);
+    },
+
+    handleVideo(item, index) {
+      //清除当前列表中的该项
+      if (this.video_uuid[index]) {
+        this.toclose(index);
+      }
+
+      this.items[index].sate = 1;
+      this.dialogIndex = index;
+      this.dialogSate = true;
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.toplay("0521", item.tdh, true);
+      });
+    },
+    toplay(id, chn, type) {
+      var stream;
+      var http = "ws://192.168.0.91:9988";
+      var user = 99999; //用户
+      var pwd =
+        "2bc7676023122670f0df72eb2303f724040953cad991eb2e20537eb056ea7a5d"; //密码
+      var car = this.$route.query.carId; //车id
+      var chn = chn; //视频通道号
+      stream = 1; //码流1（流畅）或0（高清
+      this.video_uuid[id] = this.newUUID();
+      var url = [
+        http,
+        "real_play",
+        encodeURI(user) + "*" + pwd,
+        this.video_uuid[id],
+        encodeURI(car),
+        chn,
+        stream,
+      ].join("/");
+
+      this.video_player[id] = flvjs.createPlayer(
+        {
+          type: "flv",
+          isLive: true,
+          hasAudio: false,
+          hasVideo: true,
+          cors: true,
+          url: url,
+          onmsg: function (msg) {
+            if (!msg || !msg.cmd) return;
+            if (msg.cmd == "real_play") {
+              // console.log(1);
+              // alert("<EFBFBD>յ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ӧ<EFBFBD><EFBFBD>" + msg.ret); //<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ն˶Բ<EFBFBD><EFBFBD><EFBFBD>ָ<EFBFBD><EFBFBD><EFBFBD>Ӧ<EFBFBD><EFBFBD>Ҳ<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>ն<EFBFBD><EFBFBD>ϴ<EFBFBD><EFBFBD><EFBFBD>Ƶ<EFBFBD><EFBFBD>
+              return;
+            }
+            if (msg.cmd == "tmn_open") {
+              console.log(2);
+              //  alert("<EFBFBD>յ<EFBFBD><EFBFBD>ն<EFBFBD><EFBFBD><EFBFBD>Ƶ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>");
+              return;
+            }
+
+            if (msg.cmd == "play_flow") {
+              // console.log(3);
+              // console.log("<EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>(<EFBFBD>ֽ<EFBFBD>)<EFBFBD><EFBFBD>" + msg.flow); //ÿ<EFBFBD><EFBFBD>һ<EFBFBD><EFBFBD>
+              return;
+            }
+
+            if (msg.cmd == "tmn_close") {
+              // console.log(4);
+              return;
+            }
+            console.log(JSON.stringfiy(msg));
+          },
+        },
+        { enableStashBuffer: false, fixAudioTimestampGap: false }
+      );
+      let video;
+      if (type) {
+        video = document.getElementById("videoBig");
+      } else {
+        video = document.getElementById(`video${id}`);
+      }
+      console.log(video);
+      this.video_player[id].attachMediaElement(video);
+      this.video_player[id].on(flvjs.Events.MEDIA_INFO, function () {
+        //<EFBFBD>յ<EFBFBD><EFBFBD><EFBFBD>Ƶ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʼ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>
+        // console.log("<EFBFBD><EFBFBD><EFBFBD>ųɹ<EFBFBD>");
+      });
+      this.video_player[id].load();
+      this.video_player[id].play();
+    },
+    toclose(id) {
+      this.video_player[id].send(
+        { cmd: "real_close", uuid: this.video_uuid[id] },
+        function (result) {
+          alert("<22><>Ƶ<EFBFBD>ر<EFBFBD><D8B1>ն<EFBFBD>Ӧ<EFBFBD><D3A6>:" + result.ret);
+        }
+      );
+      this.video_player[id].destroy();
+      this.video_player[id] = null;
+
+      this.video_player[id] = undefined;
+      this.video_uuid[id] = undefined;
+    },
+    handleClose(id) {
+      this.items[this.dialogIndex].sate = 2;
+      this.toclose(id);
+      this.dialogVisible = false;
+    },
     scroll(direction) {
       const itemsWrapper = this.$refs.itemsWrapper;
       if (itemsWrapper) {
@@ -69,6 +246,12 @@ export default {
         itemsWrapper.scrollLeft += direction * scrollAmount;
       }
     },
+    newUUID() {
+      var S4 = function () {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+      };
+      return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4();
+    },
   },
 };
 </script>
@@ -77,6 +260,32 @@ export default {
 .container {
   overflow: hidden;
 }
+.video-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+  .main-title,
+  .title-btn {
+    font-weight: 400;
+    font-size: 14px;
+    color: #ffffff;
+  }
+  .title-btn {
+    cursor: pointer;
+    background: #0084ff;
+    border-radius: 15px;
+    padding: 3px 6px;
+    display: flex;
+    align-items: center;
+    img {
+      display: inline-block;
+      height: 20px;
+      width: 20px;
+      margin-right: 4px;
+    }
+  }
+}
 
 .carousel {
   display: flex;
@@ -88,7 +297,7 @@ export default {
 .scroll-btn {
   position: absolute;
   top: 50%;
-  z-index: 10;
+  z-index: 50;
   transform: translateY(-50%);
   background-color: #fff;
 
@@ -124,15 +333,33 @@ export default {
   height: 140px;
   margin-right: 10px;
   .video-src {
-    display: block;
+    width: 100%;
     height: 100%;
+    object-fit: fill;
+    background-color: #000;
+    background-size: 0;
+  }
+  .video-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
+    background: url("../assets/images/cell-video.png");
+    background-size: 100% 100%;
+    z-index: 10;
+    font-weight: 400;
+    font-size: 13px;
+    color: #ffffff;
+    text-align: center;
+    line-height: 108px;
   }
   .video-data {
     position: absolute;
     bottom: 0;
     height: 32px;
     width: 100%;
+    z-index: 20;
     background: rgba(0, 52, 101, 0.9);
     display: flex;
     align-items: center;
@@ -187,4 +414,24 @@ export default {
     }
   }
 }
+#videoBig {
+  height: calc(100% - 40px);
+  width: 100%;
+  object-fit: fill;
+  background-color: #000;
+  background-size: 0;
+}
+.dialog-videoNodata {
+  height: calc(100% - 40px);
+  width: 100%;
+  object-fit: fill;
+  background: url("../assets/images/zw.png");
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .title-btn {
+    margin-left: 13px;
+  }
+}
 </style>

src/views/carInfo.vue

@@ -32,6 +32,9 @@ export default {
   data() {
     const basePathUrl = window.basePathUrl || "";
     return {
+      carInfo: {
+        videos: { vs: [] },
+      },
       mileData: {
         mile: "", //已经行驶多少里程
       },
@@ -55,6 +58,7 @@ export default {
         control: {
           contextmenu: { preventDefault: false, hasDefault: false },
         },
+        terrain: { show: false },
         basemaps: [
           {
             name: "影像地图",
@@ -107,8 +111,8 @@ export default {
       this.mapLayer.car = new mars3d.layer.GraphicLayer();
       this.map.addLayer(this.mapLayer.car);
 
-      this.createLine();
+      // this.createLine();
-      this.createCar();
+      // this.createCar();
     },
     /**
      * 加载姑苏区三维图层