视频 等内容 提交

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

@@ -15,9 +15,6 @@
     <div class="bottom" v-if="hasBtn">
       <slot name="button">
         <Button>
-          <template #prefix>
-            <img v-if="buttonIcon" :src="require(`@screen/${buttonIcon}`)" />
-          </template>
           {{ buttonText }}
         </Button>
       </slot>
@@ -148,6 +145,7 @@ export default {
   .bottom {
     display: flex;
     justify-content: end;
+    gap: 9px;
   }
 
   .status {

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

@@ -9,7 +9,7 @@
           <div class="dialog-title">
             <img class="title-icon" src="@screen/images/dialog/title-icon.svg" />
             <span>{{ title }}</span>
-            <img class="icon-close" @click="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
+            <img class="icon-close" @click.stop="modelVisible = false" src="@screen/images/dialog/icon-close.svg" />
           </div>
 
           <div class="dialog-content">

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

@@ -1,9 +1,10 @@
 <template>
-  <video controls class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
+  <!-- <video controls :src='require("@/assets/Example/d1.mp4")' autoplay muted class="video-stream" v-bind="$attrs" -->
+  <video controls autoplay muted class="video-stream" v-bind="$attrs" ref="videoContainerRef" />
 </template>
 
 <script>
-import { openVideoStream } from "./videoStream.js"
+import { HttpLivePlayer } from "./videoStream.js"
 
 export default {
   name: 'Video',
@@ -18,11 +19,14 @@ export default {
     }
   },
   mounted() {
-    openVideoStream(this.$refs.videoContainerRef, { camId: this.camId, url: this.url })
+    const player = new HttpLivePlayer(this.$refs.videoContainerRef, { camId: this.camId, url: this.url });
-  },
+    this.$once("hook:beforeDestroy", () => player.destroy())
+  }
 }
 </script>
 
 <style lang='scss' scoped>
-.video-stream {}
+.video-stream {
+  background-color: #000;
+}
 </style>

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

@@ -1,4 +1,4 @@
-import mpegts from "mpegts.js";
+import flvJs from "flv.js";
 import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js";
 
 /**
@@ -18,9 +18,9 @@ export async function openVideoStream(container, { camId, url } = {}) {
 
   if (!url) return;
 
-  console.log(mpegts.getFeatureList().mseLivePlayback);
+  // console.log(flvJs.getFeatureList().mseLivePlayback);
 
-  const player = mpegts.createPlayer({
+  const player = flvJs.createPlayer({
     type: "flv",
     url: url,
     isLive: true,
@@ -33,5 +33,102 @@ export async function openVideoStream(container, { camId, url } = {}) {
   player.load();
   player.play();
 
+  player.on(flvJs.Events.ERROR, (e) => {});
+
   return player;
 }
+
+export class HttpLivePlayer {
+  /**
+   * @type { flvJs.Player }
+   */
+  player;
+
+  /**
+   * @type { HTMLVideoElement }
+   */
+  container;
+
+  url;
+
+  // 解码 帧
+  lastDecodedFrames;
+
+  constructor(container, options) {
+    this.container = container;
+
+    this.getUrl(options).then(() => {
+      this.initLiveVideo();
+    });
+  }
+
+  async getUrl({ camId, url } = {}) {
+    if (camId) {
+      const { code, data } = await getCameraStream(camId).catch(() => ({}));
+
+      if (code != 200) return;
+
+      url = data.liveUrl;
+    }
+
+    if (!url) return Promise.reject("获取 url 失败!");
+
+    return (this.url = url);
+  }
+
+  destroy() {
+    if (!this.player) return;
+
+    this.player.pause();
+    this.player.unload();
+    this.player.detachMediaElement();
+    this.player.destroy();
+    this.player = null;
+  }
+
+  initLiveVideo() {
+    this.destroy();
+
+    this.lastDecodedFrames = null;
+
+    this.player = flvJs.createPlayer(
+      {
+        type: "flv",
+        url: this.url,
+        isLive: true,
+        // hasVideo: true,
+        hasAudio: false,
+      },
+      {
+        autoCleanupSourceBuffer: true,
+        enableWorker: false, //不启用分离线程
+        enableStashBuffer: true, //关闭IO隐藏缓冲区
+        isLive: true,
+        lazyLoad: false,
+      }
+    );
+
+    this.player.on(flvJs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
+      console.log("errorType", errorType);
+      console.log("errorDetail", errorDetail);
+      console.log("errorInfo", errorInfo);
+
+      // 视频出错后销毁重建
+      this.destroy();
+      this.init();
+    });
+
+    // 视频断流
+    this.player.on(flvJs.Events.STATISTICS_INFO, function (res) {
+      if (this.lastDecodedFrames != res.decodedFrames) {
+        this.lastDecodedFrames = res.decodedFrames;
+      } else {
+        this.lastDecodedFrames = 0;
+        this.destroy();
+        this.init();
+      }
+    });
+
+    this.player.attachMediaElement(this.container);
+  }
+}

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/DrivingGuidance/index.vue

@@ -42,7 +42,7 @@ export default {
   data() {
     return {
       activeName: 'first',
-      deviceControlVisible: true,
+      deviceControlVisible: false,
       data: {
         deviceType: "行车诱导",
         deviceStation: "k094+079",

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/EditEventInformationDialog/data.js

@@ -0,0 +1,39 @@
+import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
+
+export const formConfigList = [
+  {
+    label: "事故类型:",
+    key: "key13",
+    type: "select",
+  },
+  PresetFormItems.trafficAccidentType,
+  PresetFormItems.callPolicePersonName,
+  PresetFormItems.callPolicePersonPhone,
+  PresetFormItems.route,
+  PresetFormItems.direction,
+  PresetFormItems.eventLevel,
+  PresetFormItems.station,
+  PresetFormItems.locationMode,
+  PresetFormItems.pressure,
+  PresetFormItems.eventHappenTime,
+  PresetFormItems.aEstimatedReleaseTime,
+  PresetFormItems.weatherConditions,
+  PresetFormItems.effect,
+  PresetFormItems.isMaintenanceAccident,
+  PresetFormItems.isCongestionAhead,
+  PresetFormItems.isCurveRoad,
+  PresetFormItems.isInTunnel,
+  PresetFormItems.isArrives,
+  PresetFormItems.isForkRoad,
+  PresetFormItems.emptyLine,
+  PresetFormItems.trafficPolicePhone,
+  {
+    ...PresetFormItems.emptyLine,
+    key: "096993",
+  },
+  PresetFormItems.wreckerCalls,
+  PresetFormItems.spillName,
+  PresetFormItems.ownerPhone,
+  PresetFormItems.laneOccupancy,
+  PresetFormItems.vehicleCondition,
+];

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/businessDataManagement/views/emergencyAgencies/components/EditEventInformationDialog/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <Dialog v-model="modelVisible" title="修改事件信息">
+    <div class="EditEventInformationDialog">
+      <Form class="form" :formList="formConfigList" column="2" labelWidth="120px" />
+
+      <div class="footer">
+        <Button>保存</Button>
+        <Button style="background: #C9C9C9;">关闭</Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@screen/components/Dialog/index";
+import Form from '@screen/components/FormConfig';
+import Button from '@screen/components/Buttons/Button.vue';
+
+import { formConfigList } from "./data.js"
+
+export default {
+  name: 'EditEventInformationDialog',
+  components: {
+    Dialog,
+    Form,
+    Button
+  },
+  model: {
+    prop: 'visible',
+    event: 'close'
+  },
+  props: {
+    visible: Boolean
+  },
+  data() {
+    return {
+      formConfigList
+    }
+  },
+  computed: {
+    modelVisible: {
+      get() {
+        return this.visible;
+      },
+      set(val) {
+        this.$emit('close', val)
+      }
+    },
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.EditEventInformationDialog {
+  gap: 9px;
+  width: 810px;
+  height: 771px;
+  display: flex;
+  flex-direction: column;
+
+  .form {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: end;
+    gap: 15px;
+  }
+}
+</style>

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

@@ -26,7 +26,16 @@
     </div>
 
     <div class='body'>
-      <Card v-for="(item, index) in data" :cardData="item" :key="index" />
+      <Card v-for="(item, index) in data" :cardData="item" :key="index">
+        <template #button>
+          <Button>
+            修改
+          </Button>
+          <Button style="background-color: #FF5F5F;">
+            删除
+          </Button>
+        </template>
+      </Card>
     </div>
   </div>
 </template>
@@ -35,13 +44,15 @@
 import Card from "@screen/components/Card1/index.vue"
 import InputSearch from '@screen/components/InputSearch/index.vue';
 import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
+import Button from '@screen/components/Buttons/Button.vue';
 
 export default {
   name: 'EmergencyAgencies',
   components: {
     Card,
     ButtonGradient,
-    InputSearch
+    InputSearch,
+    Button
   },
   data() {
     return {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/PresetFormItems.js

@@ -341,13 +341,13 @@ export const isInTunnel = {
 export const freeway = {
   label: "高速公路:",
   required: true,
-  key: "key213",
+  key: "roadId",
   type: "select",
 };
 
 export const weatherConditions = {
   label: "天气情况:",
-  key: "key01236",
+  key: "isCongestionAhead",
   type: "RadioGroup",
   isAlone: true,
   required: true,
@@ -355,29 +355,73 @@ export const weatherConditions = {
     activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
     options: [
       {
-        key: "雨雾",
+        key: "1-1",
         label: "雨雾",
       },
       {
-        key: "雨雪",
+        key: "1-2",
         label: "雨雪",
       },
       {
-        key: "中雨",
+        key: "1-3",
         label: "中雨",
       },
       {
-        key: "小雨",
+        key: "1-4",
         label: "小雨",
       },
       {
-        key: "大雨",
+        key: "1-5",
         label: "大雨",
       },
       {
-        key: "暴雨",
+        key: "1-6",
         label: "暴雨",
       },
+      {
+        key: "2-1",
+        label: "小雪",
+      },
+      {
+        key: "2-2",
+        label: "中雪",
+      },
+      {
+        key: "2-3",
+        label: "大雪",
+      },
+      {
+        key: "2-4",
+        label: "暴雪",
+      },
+      {
+        key: "2-5",
+        label: "大暴雪",
+      },
+      {
+        key: "2-6",
+        label: "特大暴雪",
+      },
+      {
+        key: "3-1",
+        label: "轻雾",
+      },
+      {
+        key: "3-2",
+        label: "大雾",
+      },
+      {
+        key: "3-3",
+        label: "浓雾",
+      },
+      {
+        key: "3-4",
+        label: "强浓雾",
+      },
+      {
+        key: "3-5",
+        label: "团雾",
+      },
     ],
   },
 };
@@ -397,15 +441,16 @@ export const additionalNotes = {
 
 export const callPolicePersonName = {
   label: "报警人姓名:",
-  key: "key1",
+  key: "reporterName",
   options: {
     placeholder: "请输入报警人姓名",
   },
   required: true,
 };
+
 export const callPolicePersonPhone = {
   label: "报警人电话:",
-  key: "key2",
+  key: "reporterPhoneNumber",
   options: {
     placeholder: "请输入报警人电话(区号+号码)",
   },
@@ -414,30 +459,34 @@ export const callPolicePersonPhone = {
 
 export const trafficAccidentType = {
   label: "交通事故类型:",
-  key: "key3",
+  key: "accidentType",
   type: "select",
   required: true,
   options: {
     options: [
       {
-        value: "选项1",
+        value: "1",
-        label: "黄金糕",
+        label: "侧翻",
+      },
+      {
+        value: "2",
+        label: "撞障碍物",
       },
       {
-        value: "选项2",
+        value: "3",
-        label: "双皮奶",
+        label: "货物洒落",
       },
       {
-        value: "选项3",
+        value: "4",
-        label: "蚵仔煎",
+        label: "撞护栏",
       },
       {
-        value: "选项4",
+        value: "5",
-        label: "龙须面",
+        label: "自燃",
       },
       {
-        value: "选项5",
+        value: "6",
-        label: "北京烤鸭",
+        label: "追尾",
       },
     ],
   },
@@ -445,9 +494,17 @@ export const trafficAccidentType = {
 
 export const locationMode = {
   label: "地点方式:",
-  key: "key5",
+  key: "locationType",
   required: true,
   type: "select",
+  options: {
+    options: [
+      { key: "1", label: "高速主线" },
+      { key: "2", label: "服务区" },
+      { key: "3", label: "立交桥" },
+      { key: "4", label: "收费站" },
+    ],
+  },
 };
 
 export const route = {
@@ -477,17 +534,17 @@ export const pressure = {
 
 export const isCongestionAhead = {
   label: "前方是否拥堵:",
-  key: "key18",
+  key: "congestionAhead",
   type: "RadioGroup",
   options: {
     activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
     options: [
       {
-        key: "是",
+        key: "0",
         label: "是",
       },
       {
-        key: "否",
+        key: "1",
         label: "否",
       },
     ],
@@ -496,35 +553,36 @@ export const isCongestionAhead = {
 
 export const isForkRoad = {
   label: "是否分岔口:",
-  key: "key19",
+  key: "atIntersection",
   type: "RadioGroup",
   options: {
     activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
     options: [
       {
-        key: "是",
+        key: "0",
         label: "是",
       },
       {
-        key: "否",
+        key: "1",
         label: "否",
       },
     ],
   },
 };
+
 export const isCurveRoad = {
   label: "是否处在弯道:",
-  key: "key20",
+  key: "minorInjuries",
   type: "RadioGroup",
   options: {
     activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
     options: [
       {
-        key: "是",
+        key: "1",
         label: "是",
       },
       {
-        key: "否",
+        key: "0",
         label: "否",
       },
     ],
@@ -533,23 +591,32 @@ export const isCurveRoad = {
 
 export const effect = {
   label: "影响:",
-  key: "key13599",
+  key: "impactLevel",
   type: "select",
+  options: {
+    options: [
+      { key: "1", label: "无" },
+      { key: "2", label: "危化品泄漏" },
+      { key: "3", label: "整车自燃" },
+      { key: "4", label: "车辆复燃" },
+      { key: "5", label: "散装人工倒货" },
+    ],
+  },
 };
 
 export const isArrives = {
   label: "是否到货:",
-  key: "key14",
+  key: "isReverseCargo",
   type: "RadioGroup",
   options: {
     activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
     options: [
       {
-        key: "是",
+        key: "1",
         label: "是",
       },
       {
-        key: "否",
+        key: "0",
         label: "否",
       },
     ],
@@ -558,17 +625,17 @@ export const isArrives = {
 
 export const isMaintenanceAccident = {
   label: "是否养护事故:",
-  key: "key15",
+  key: "isMaintenance",
   type: "RadioGroup",
   options: {
     activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
     options: [
       {
-        key: "是",
+        key: "1",
         label: "是",
       },
       {
-        key: "否",
+        key: "0",
         label: "否",
       },
     ],
@@ -577,7 +644,7 @@ export const isMaintenanceAccident = {
 
 export const trafficPolicePhone = {
   label: "交警电话:",
-  key: "key16",
+  key: "policeContact",
 };
 
 export const wreckerCalls = {
@@ -623,3 +690,173 @@ export const eventType = {
   key: "事件类型",
   type: "input",
 };
+
+export const constructionMeasurement = {
+  label: "施工措施:",
+  key: "constructionMeasurement",
+  type: "RadioGroup",
+  isAlone: true,
+  required: true,
+  options: {
+    activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+    options: [
+      {
+        key: "0",
+        label: "无",
+      },
+      {
+        key: "1",
+        label: "并道行驶",
+      },
+      {
+        key: "2",
+        label: "临时保通",
+      },
+      {
+        key: "3",
+        label: "借路侧服务区通行",
+      },
+    ],
+  },
+};
+
+export const locationType = {
+  label: "地点类型:",
+  key: "locationType",
+  type: "RadioGroup",
+  isAlone: true,
+  required: true,
+  options: {
+    activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+    options: [
+      {
+        key: "1",
+        label: "单点",
+      },
+      {
+        key: "2",
+        label: "多点",
+      },
+    ],
+  },
+};
+
+export const specialConstruction = {
+  label: "专项施工:",
+  key: "specialConstruction",
+  type: "RadioGroup",
+  isAlone: true,
+  required: true,
+  options: {
+    activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+    options: [
+      {
+        key: "1",
+        label: "专项工程施工",
+      },
+      {
+        key: "2",
+        label: "改扩建专项工程施工",
+      },
+      {
+        key: "3",
+        label: "桥梁专项工程施工",
+      },
+      {
+        key: "4",
+        label: "其他专项工程施工",
+      },
+    ],
+  },
+};
+
+export const trafficCondition = {
+  label: "通行情况:",
+  key: "trafficCondition",
+  type: "RadioGroup",
+  isAlone: true,
+  required: true,
+  options: {
+    activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+    options: [
+      {
+        key: "1",
+        label: "通行正常",
+      },
+      {
+        key: "2",
+        label: "通行受阻",
+      },
+    ],
+  },
+};
+
+export const disableFacility = {
+  label: "停用设施:",
+  key: "disableFacility",
+  type: "RadioGroup",
+  isAlone: true,
+  required: true,
+  options: {
+    activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+    options: [
+      {
+        key: "1",
+        label: "卫生间",
+      },
+      {
+        key: "2",
+        label: "餐厅",
+      },
+      {
+        key: "3",
+        label: "停车场",
+      },
+      {
+        key: "4",
+        label: "加油站",
+      },
+      {
+        key: "5",
+        label: "充电桩",
+      },
+    ],
+  },
+};
+
+export const congestionCause = {
+  label: "拥堵原因:",
+  key: "congestionCause",
+  type: "RadioGroup",
+  isAlone: true,
+  required: true,
+  options: {
+    activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
+    options: [
+      {
+        key: "1",
+        label: "车流量大",
+      },
+      {
+        key: "2",
+        label: "交通事故",
+      },
+      {
+        key: "3",
+        label: "交通管制",
+      },
+      {
+        key: "4",
+        label: "恶劣天气",
+      },
+      {
+        key: "5",
+        label: "集团所辖路段施工",
+      },
+      {
+        key: "6",
+        label: "其他",
+      },
+    ],
+  },
+};

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/FormEvent/data.js

@@ -103,42 +103,7 @@ export const tabConfigList = [
             ],
           },
         },
-        {
+        PresetFormItems.congestionCause,
-          label: "拥堵原因:",
-          key: "key012036",
-          type: "RadioGroup",
-          isAlone: true,
-          required: true,
-          options: {
-            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
-            options: [
-              {
-                key: "车流量大",
-                label: "车流量大",
-              },
-              {
-                key: "交通事故",
-                label: "交通事故",
-              },
-              {
-                key: "交通管制",
-                label: "交通管制",
-              },
-              {
-                key: "恶劣天气",
-                label: "恶劣天气",
-              },
-              {
-                key: "集团所辖路段施工",
-                label: "集团所辖路段施工",
-              },
-              {
-                key: "其他可选",
-                label: "其他可选",
-              },
-            ],
-          },
-        },
         PresetFormItems.isInTunnel,
         {
           label: "拥堵里程:",
@@ -641,26 +606,7 @@ export const tabConfigList = [
           },
         },
         PresetFormItems.isInTunnel,
-        {
+        PresetFormItems.locationType,
-          label: "地点类型:",
-          key: "key0138",
-          type: "RadioGroup",
-          isAlone: true,
-          required: true,
-          options: {
-            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
-            options: [
-              {
-                key: "单点",
-                label: "单点",
-              },
-              {
-                key: "多点",
-                label: "多点",
-              },
-            ],
-          },
-        },
         PresetFormItems.freeway,
         PresetFormItems.direction,
         PresetFormItems.station,
@@ -677,62 +623,8 @@ export const tabConfigList = [
             showWordLimit: true,
           },
         },
-        {
+        PresetFormItems.specialConstruction,
-          label: "专项施工:",
+        PresetFormItems.constructionMeasurement,
-          key: "key01380",
-          type: "RadioGroup",
-          isAlone: true,
-          required: true,
-          options: {
-            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
-            options: [
-              {
-                key: "专项工程施工",
-                label: "专项工程施工",
-              },
-              {
-                key: "改扩建专项工程施工",
-                label: "改扩建专项工程施工",
-              },
-              {
-                key: "桥梁专项工程施工",
-                label: "桥梁专项工程施工",
-              },
-              {
-                key: "其他专项工程施工",
-                label: "其他专项工程施工",
-              },
-            ],
-          },
-        },
-        {
-          label: "施工措施:",
-          key: "key013800",
-          type: "RadioGroup",
-          isAlone: true,
-          required: true,
-          options: {
-            activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)",
-            options: [
-              {
-                key: "无",
-                label: "无",
-              },
-              {
-                key: "并道行驶",
-                label: "并道行驶",
-              },
-              {
-                key: "临时保通",
-                label: "临时保通",
-              },
-              {
-                key: "借路侧服务区通行",
-                label: "借路侧服务区通行",
-              },
-            ],
-          },
-        },
         PresetFormItems.startTime,
         PresetFormItems.expectedEndTime,
         PresetFormItems.remark,