feat 感知事件弹窗展示内容更新

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

@@ -1,7 +1,12 @@
 <template>
   <Dialog v-model="obverseVisible" title="感知事件">
     <div class="PerceiveEvent">
-      <Video class="item-video" />
+      <!-- <Video class="item-video" /> -->
+      <div class="video-pic">
+        <Video style="height: 100%;flex:1" :showHeader="activeName != '-1'" :url="dialogData.formData.videoList[0]"
+          videoType="mp4" />
+        <Carousel style="flex: 1;height: 100%;" :pictures="dialogData.formData.pictures" />
+      </div>
       <LineChart class="chart" />
       <Form class="form" v-loading="loading" v-model="data" ref="FormConfigRef" :formList="formList" column="1" />
     </div>
@@ -24,7 +29,7 @@ import Form from '@screen/components/FormConfig';
 import request from "@/utils/request";
 import { Message } from "element-ui";
 import moment from "moment";
-
+import Carousel from "@screen/pages/control/event/event/EventDetailDialog/Carousel"
 import { WarningTypeList, WarningSubclassList } from "@screen/utils/enum.js"
 // import { getRoadInfoByStakeMark, getProduct } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
 import { dialogDelayVisible } from "./../mixin"
@@ -42,6 +47,7 @@ export default {
     Descriptions,
     LineChart,
     Video,
+    Carousel,
     Form
   },
   data() {
@@ -215,7 +221,7 @@ export default {
           // };
           data.duration = this.convertSecToHHmmss(data.duration);
           this.data = { ...data, roadName: null, lane: data.lane?.split(",") || [] };
-          
+
           this.formList[4].options.options = WarningSubclassList[data.warningType] || [];
 
           setTimeout(() => {
@@ -223,7 +229,7 @@ export default {
           });
         })
         .catch((e) => {
-          Message.error("详情获取失败"+e);
+          Message.error("详情获取失败" + e);
         })
         .finally(() => {
           this.loading = false;
@@ -276,6 +282,13 @@ export default {
   grid-template-rows: repeat(2, 1fr);
   gap: 9px;
 
+  .video-pic {
+    display: flex;
+    height: 190px;
+    gap: 15px;
+    justify-content: space-around;
+  }
+
   .item-video {
     grid-area: 1/1/1/1;
   }

ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js

@@ -97,10 +97,14 @@ function resolveDataOptions(data, config, component, isDefault) {
     name: "",
     config: {
       markerClick: (extData, item) => {
+        const formData = extData?.otherConfig
+          ? JSON.parse(extData.otherConfig)
+          : null;
         this.dialogConfig = {
           component,
           data: {
             ...extData,
+            formData,
             parseOtherConfig: JSON.parse(extData.otherConfig || "{}"),
             _itemData: item,
           },