更新视频、消息发布等功能

ruoyi-ui/src/views/JiHeExpressway/components/Video/Video.vue

@@ -46,7 +46,6 @@ export default {
   },
   async mounted() {
     // setTimeout(() => {
-    //   this.$nextTick(() => {
     this.playVideo();
     this.$once("hook:beforeDestroy", () => this.player?.destroy());
     //   })

ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue

@@ -13,6 +13,7 @@
       </div>
     </div>
     <Transition name="fade" mode="out-in">
+      
       <Video :rangeIndex="rangeIndex" v-if="active === 'video'" class="video-stream" :pileNum="pileNum" :camId="camId"
         :url="url" :videoType="videoType" />
       <img v-else src="./view.png" />

ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js

@@ -67,7 +67,6 @@ export async function openVideoStream(container, { camId, url } = {}) {
 async function getUrl({ camId, url, pileNum, rangeIndex } = {}) {
   // return testFlvUrl;
   if (url) return url;
-
   if (pileNum) {
     let code, data, cameraData;
     if (rangeIndex) {
@@ -128,7 +127,6 @@ export class HttpLivePlayer {
     this.container = container;
     if (!flvJs.getFeatureList().mseLiveFlvPlayback)
       return Message.error("浏览器不支持播放 flv 视频流");
-
     getUrl(options).then((url) => {
       this.url = url;
       this.initLiveVideo();

ruoyi-ui/src/views/JiHeExpressway/components/Video2/flv-stream.js

@@ -0,0 +1,41 @@
+import flvJs from "flv.js";
+import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+
+/**
+ *
+ * @param {HTMLElement} container 容器
+ * @param {{camId?: string; url?: string}?} options {camId: 相机ID; url: 直播地址}
+ * @returns
+ */
+export async function openVideoStream(container, { camId, url } = {}) {
+  if (camId) {
+    const { code, data } = await getCameraStream(camId).catch(() => ({}));
+
+    if (code != 200) return;
+
+    url = data.liveUrl;
+  }
+
+  if (!url) return;
+
+  const flvPlayer = flvJs.createPlayer({
+    type: "flv",
+    url: url,
+    isLive: true,
+    hasVideo: true,
+    hasAudio: true,
+  });
+
+  console.log(
+    "%c [ flvPlayer ]-26-「videoStream.js」",
+    "font-size:15px; background:#b2b540; color:#f6f984;",
+    flvPlayer
+  );
+
+  flvPlayer.attachMediaElement(container);
+
+  flvPlayer.load();
+  flvPlayer.play();
+
+  return flvPlayer;
+}

ruoyi-ui/src/views/JiHeExpressway/components/Video2/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="video-container">
+    <div class="header">
+      <ElSelect @change="showVideo" v-model="cameraId">
+        <ElOption v-for="item in urls"
+          :key="item.id" :label="item.deviceName" :value="item.iotDeviceId">
+        </ElOption>
+      </ElSelect>
+    </div>
+    <Transition name="fade" mode="out-in">
+      <video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
+    </Transition>
+  </div>
+</template>
+
+<script>
+import { HttpLivePlayer, openLiveVideo } from "./videoStream.js"
+
+import {
+  getNearCameraNew,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+
+export default {
+  name: 'VideoControls',
+  components: {
+  },
+  props: {
+    // 桩号
+    pileNum: {
+      type: String,
+      default: null
+    },
+    rangeIndex: {
+      type: String,
+      default: null
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      active: "video",
+      player: null,
+      urls:[],
+      cameraId: null
+    }
+  },
+  async mounted() {
+    this.playVideo();
+    this.$once("hook:beforeDestroy", () => this.player?.destroy());
+  },
+  methods: {
+    
+    async playVideo() {
+      this.player?.destroy();
+      
+      let {code,data} = await getNearCameraNew(this.pileNum).catch(() => ({}));
+      if (
+        code != 200 ||
+        (Array.isArray(data) ? !data?.length : !Object.keys(data || {}).length)
+      ) {
+        Message.warning("未获取到附近的相机信息");
+        return;
+      }
+      if(data[this.rangeIndex]){
+        this.urls = data[this.rangeIndex]
+        this.cameraId = data[this.rangeIndex][0]['iotDeviceId']
+        this.showVideo();
+      }
+    },
+    showVideo(){
+      this.player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.cameraId});
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.video-container {
+  position: relative;
+  background-color: #000;
+  height: 240px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.24s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .header {
+    width: 100%;
+    z-index: 999;
+    display: flex;
+    justify-content: space-between;
+    .radio {
+      background: #265A70;
+      border-radius: 41px 41px 41px 41px;
+      overflow: hidden;
+      opacity: 1;
+      border: 1px solid #3DE8FF;
+      font-size: 12px;
+      // font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 14px;
+      height: fit-content;
+
+      // -webkit-background-clip: text;
+      // -webkit-text-fill-color: transparent;
+
+      .active {
+        background-color: rgba(61, 232, 255, 1);
+      }
+
+      span {
+        background-color: rgba(38, 90, 112, 1);
+        padding: 4px 9px;
+        display: inline-block;
+        cursor: pointer;
+
+        &:hover {
+          background-color: rgba(61, 232, 255, 1);
+        }
+      }
+    }
+
+    .btn {
+      background: #265A70;
+      border-radius: 6px 6px 6px 6px;
+      opacity: 1;
+      border: 1px solid #3DE8FF;
+      font-size: 12px;
+      // font-family: PingFang SC, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 14px;
+      padding: 3px 9px;
+      cursor: pointer;
+      // -webkit-background-clip: text;
+      // -webkit-text-fill-color: transparent;
+    }
+  }
+
+
+  .video-stream,
+  img {
+    height: 100%;
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  .video-stream {
+    width: 100%;
+  }
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/components/Video2/videoStream.js

@@ -0,0 +1,238 @@
+import flvJs from "flv.js";
+import mpegTsJs from "mpegts.js";
+import { Message } from "element-ui";
+// mpegts.js
+import {
+  getCameraStream,
+  getNearCamera,
+  getNearCameraNew,
+} from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
+
+const ErrorTypesCn = {
+  NetworkError: "网络错误",
+  MediaError: "媒体错误",
+  OtherError: "其他错误",
+};
+/**
+ * flv 视频测试
+ * https://bilibili.github.io/flv.js/demo/
+ * https://www.zngg.net/tool/detail/FlvPlayer
+ * https://xqq.im/mpegts.js/demo/arib.html
+ */
+
+/**
+ * flv 视频流
+ */
+const testFlvUrl =
+  "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-720p.flv";
+// "https://v17.dogevideo.com/vcloud/17/v/20190424/1556036075_818c4125ec9c8cbc7a7a8a7cc1601512/1057/e51d88e79732fb952ebdbb4a57aa628a.flv?vkey=D9EAC2&tkey=17062414799ec7c466dc&auth_key=1706255879-zQK6JYToEeRiUark-0-6e363fb7709e783e64efc919d2267bdc";
+
+/**
+ *
+ * @param {HTMLElement} container 容器
+ * @param {{camId?: string; url?: string}?} options {camId: 相机ID; url: 直播地址}
+ * @returns
+ */
+export async function openVideoStream(container, { camId, url } = {}) {
+  if (camId) {
+    const { code, data } = await getCameraStream(camId).catch(() => ({}));
+
+    if (code != 200) return;
+
+    url = data.liveUrl;
+  }
+
+  if (!url) return;
+
+  // console.log(flvJs.getFeatureList().mseLivePlayback);
+
+  const player = flvJs.createPlayer({
+    type: "flv",
+    url: url,
+    isLive: true,
+    hasVideo: true,
+    hasAudio: true,
+  });
+
+  player.attachMediaElement(container);
+
+  player.load();
+  player.play();
+
+  player.on(flvJs.Events.ERROR, (e) => {});
+
+  return player;
+}
+
+async function getUrl({ camId} = {}) {
+ 
+  const { code, data } = await getCameraStream(camId).catch(() => ({}));
+  if (code != 200) {
+    Message.warning("未获取到当前相机的播放地址");
+    return;
+  }
+
+  let url = data.liveUrl;
+  if (!url) {
+    Message.warning("未获取到当前相机的播放地址");
+    return Promise.reject("获取 url 失败!");
+  }
+
+  return url;
+}
+export class HttpLivePlayer {
+  /**
+   * @type { flvJs.Player }
+   */
+  player;
+
+  /**
+   * @type { HTMLVideoElement }
+   */
+  container;
+
+  url;
+
+  // 解码 帧
+  lastDecodedFrames;
+
+  constructor(container, options) {
+    this.container = container;
+    if (!flvJs.getFeatureList().mseLiveFlvPlayback)
+      return Message.error("浏览器不支持播放 flv 视频流");
+    getUrl(options).then((url) => {
+      this.url = url;
+      this.initLiveVideo();
+    });
+  }
+
+  destroy() {
+    if (!this.player) return;
+
+    this.player.pause();
+    this.player.unload();
+    this.player.detachMediaElement();
+    this.player.destroy();
+    this.player = null;
+  }
+
+  initLiveVideo() {
+    this.destroy();
+    this.player = null;
+    this.lastDecodedFrames = null;
+
+    if (!this.url) return;
+
+    this.player = flvJs.createPlayer(
+      {
+        type: "flv",
+        url: this.url,
+        isLive: true,
+      },
+      {
+        autoCleanupSourceBuffer: true,
+        // enableWorker: true, // 启用分离的线程进行转换
+        enableStashBuffer: false, // 关闭IO隐藏缓冲区  如果您需要实时（最小延迟）来进行实时流播放，则设置为false
+        stashInitialSize: 128,
+        isLive: true,
+        lazyLoad: true,
+      }
+    );
+
+    this.player.attachMediaElement(this.container);
+
+    this.player.load();
+    this.player.play();
+
+    // this.container.addEventListener("progress", () => {
+    //   let end = this.player.buffered.end(0); //获取当前buffered值(缓冲区末尾)
+    //   let delta = end - this.player.currentTime; //获取buffered与当前播放位置的差值
+
+    //   // 延迟过大，通过跳帧的方式更新视频
+    //   if (delta > 10 || delta < 0) {
+    //     this.player.currentTime = this.player.buffered.end(0) - 1;
+    //     return;
+    //   }
+
+    //   // 追帧
+    //   if (delta > 1) {
+    //     this.container.playbackRate = 1.1;
+    //   } else {
+    //     this.container.playbackRate = 1;
+    //   }
+    // });
+
+    this.player.on(flvJs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+      console.log("errorType", errorType);
+      console.log("errorDetail", errorDetail);
+      console.log("errorInfo", errorInfo);
+      Message.warning(
+        `视频流加载失败, ${ErrorTypesCn[errorType] || "其他错误"}`
+      );
+      this.initLiveVideo();
+    });
+
+    // 视频断流
+    this.player.on(flvJs.Events.STATISTICS_INFO, (res) => {
+      if (this.lastDecodedFrames != res.decodedFrames) {
+        this.lastDecodedFrames = res.decodedFrames;
+      } else {
+        this.lastDecodedFrames = 0;
+        // this.destroy();
+        // this.initLiveVideo();
+      }
+    });
+  }
+}
+
+/**
+ * https://juejin.cn/post/6855577308271476743
+ * https://www.cnblogs.com/xiahj/p/flvExtend.html
+ * 使用 mpegTsJs
+ * @param {*} container
+ * @param {*} options
+ */
+export async function openLiveVideo(container, options) {
+  if (!mpegTsJs.getFeatureList().mseLivePlayback)
+    return Message.error("浏览器不支持播放 flv 视频流");
+  const url = await getUrl(options).catch(() => {});
+  console.log(
+    "%c [ url ]-212-「videoStream.js」",
+    "font-size:15px; background:#6f87e8; color:#b3cbff;",
+    url,
+    options
+  );
+
+  if (!url) return;
+
+  const player = mpegTsJs.createPlayer(
+    {
+      type: "flv",
+      url,
+      isLive: true,
+    },
+    {
+      autoCleanupSourceBuffer: true,
+      enableWorker: true, // 启用分离的线程进行转换
+      // enableStashBuffer: false, // 关闭IO隐藏缓冲区  如果您需要实时（最小延迟）来进行实时流播放，则设置为false
+      // stashInitialSize: 128,
+      isLive: true,
+      lazyLoad: true,
+    }
+  );
+
+  player.attachMediaElement(container);
+
+  container.addEventListener("play", () => {
+    try {
+      let end = player.buffered.end(0) - 1;
+
+      player.currentTime = end;
+    } catch (error) {}
+  });
+
+  player.load();
+  player.play();
+
+  return player;
+}

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DispatchLiaison/index.vue

@@ -105,9 +105,7 @@ export default {
         res.data.forEach((element) => {
           if (element.vehiclesMap.length > 0) {
             element.vehiclesMap.forEach((item) => {
-              console.log(789, item);
               this.vehicleTypeList.forEach((i) => {
-                console.log(456, i);
                 if (item.vehicleType == i.dictValue) {
                   item.vehicleText = "（" + i.dictLabel + "）";
                 }

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/RealTimeVideo/index.vue

@@ -1,19 +1,19 @@
 <template>
   <Card class='RealTimeVideo' title="实时视频">
     <div class="item">
-      <Video class="item-video" :pileNum="detailData.stakeMark" />
-      <span>处置现场</span>
+      <Video v-if="detailData.stakeMark" class="item-video" :pileNum="detailData.stakeMark" rangeIndex="upCamera" :showHeader="false" />
+      <span>济南方向</span>
     </div>
     <div class="item">
-      <Video class="item-video" />
-      <span>感知视频</span>
+      <Video v-if="detailData.stakeMark" class="item-video" :pileNum="detailData.stakeMark" rangeIndex="downCamera" :showHeader="false" />
+      <span>菏泽方向</span>
     </div>
   </Card>
 </template>
 
 <script>
 import Card from "@screen/components/Card2/Card.vue";;
-import Video from "@screen/components/Video"
+import Video from "@screen/components/Video2"
 import { provideMixin } from "./../../mixin"
 
 export default {
@@ -32,7 +32,7 @@ export default {
   ::v-deep {
     .content {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: space-between;
       gap: 9px;
     }
@@ -43,6 +43,7 @@ export default {
     display: flex;
     flex-direction: column;
     height: 100%;
+    max-height: 250px;
     align-items: center;
     gap: 6px;
 

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/ReleaseInformation/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Card class='ReleaseInformation' title="信息发布">
-    <Form :formList="formList" column="1">
-      <template #platform="{ formData, data }">
+    <Form :formList="formList" column="1"  ref="FormMsgRef" >
+      <template #type="{ formData, data }">
         <CheckboxGroup :options="checkboxList" v-model="formData[data.key]">
           <template v-for="item in checkboxList" #[item.key]="{ data }">
             <div class="checkbox-content">
@@ -25,7 +25,7 @@
     </Descriptions> -->
 
     <div class="bottom">
-      <ButtonGradient class="title-button special-button">
+      <ButtonGradient @click="confirm" class="title-button special-button">
         一键发布
       </ButtonGradient>
       <!-- <ButtonGradient class="title-button special-button">
@@ -42,6 +42,7 @@ import Form from '@screen/components/FormConfig';
 import CheckboxGroup from '@screen/components/FormConfig/components/ElCheckboxGroup.vue';
 import Descriptions from '@screen/components/Descriptions.vue';
 import { provideMixin } from "./../../mixin"
+import { method, result } from "lodash";
 
 export default {
   name: 'ReleaseInformation',
@@ -64,10 +65,10 @@ export default {
       ],
       checkboxValues: [],
       checkboxList: [
-        { key: 'weChat', label: '微信' },
-        { key: 'message', label: '短信' },
-        { key: 'website', label: '网站' },
-        { key: 'weibo', label: '新浪' },
+        {  key: '1', label: '微信' },
+        {  key: '2', label: '短信' },
+        {  key: '3', label: '网站' },
+        {  key: '4', label: '新浪' },
       ],
       formList: [{
         label: "发布内容:",
@@ -82,11 +83,22 @@ export default {
       },
       {
         label: "发布平台:",
-        key: "platform",
+        key: "type",
         type: "input",
         default: []
       }],
     }
+  },
+  methods: {
+    async confirm(){
+      await this.$refs.FormMsgRef.validate()
+          .then((res) => {
+           console.log(res)
+          })
+          .catch((err) => {
+            console.log("catch");
+          });
+    }
   }
 }
 </script>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="CommandDispatch" :style="{ '--row': row }">
+  <div class="CommandDispatch" :style="{ '--row': row , 'height': '100%'}">
     <component
       :is="key"
       v-for="(_, key) in gridAreaMap"
@@ -78,11 +78,11 @@ export default {
           if(['设备设施隐患','非法上路','施工建设','服务区异常'].includes(result.data.eventName)){
             const gridArea = {...originGridArea}
             // 第一列变化
-            gridArea['DispatchLiaison'] = '10 / 1 / span 20 / 2'
+            gridArea['DispatchLiaison'] = '13 / 1 / span 21 / 2'
             delete gridArea.TrafficControl;
             if(['设备设施隐患','非法上路'].includes(result.data.eventName)){
               // 第三列变化
-              gridArea['RealTimeVideo'] = '1 / 3 / span 17 / 3'
+              gridArea['RealTimeVideo'] = '1 / 3 / span 16 / 3'
               delete gridArea.ReleaseInformation;
             }