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

1 week ago · bd76e92cc1
parent 665b8f6db2
commit bd76e92cc1
7 changed files with 274 additions and 21 deletions
--- a/public/index.html
+++ b/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> -->

--- a/src/assets/images/cell-video.png
+++ b/src/assets/images/cell-video.png
--- a/src/assets/images/sx.png
+++ b/src/assets/images/sx.png
--- a/src/assets/images/zw.png
+++ b/src/assets/images/zw.png
--- a/src/assets/images/监控视频弹窗背景@2x.png
+++ b/src/assets/images/监控视频弹窗背景@2x.png
--- a/src/components/grids.vue
+++ b/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: [
-        "Item 1",
-        "Item 2",
-        "Item 3",
-        "Item 4",
-        "Item 5",
-        "Item 6",
-        "Item 7",
-        "Item 8",
-        "Item 9",
-        "Item 10",
-      ],
+      dialogIndex: 0,
+      dialogSate: false,
+      items: [],
    };
  },
+
+  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>
--- a/src/views/carInfo.vue
+++ b/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.createCar();
+      // this.createLine();
+      // this.createCar();
    },
    /**
     * 加载姑苏区三维图层